首页html图片轮播效果代码

html图片轮播效果代码

时间: 2023-06-06 21:06:23 浏览: 1841

以下是一个简单的HTML图片轮播效果代码： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style type="text/css"> .container { position: relative; width: 100%; height: 400px; overflow: hidden; } .slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 400px; } .slideshow img { display: none; width: 100%; height: 400px; } .slideshow img:first-child { display: block; } #prevBtn, #nextBtn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; font-weight: bold; color: #fff; background-color: rgba(0, 0, 0, 0.5); padding: 10px; cursor: pointer; } #prevBtn { left: 0; } #nextBtn { right: 0; } </style> </head> <body> <div class="container"> <div class="slideshow"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <div id="prevBtn"><</div> <div id="nextBtn">></div> </div> <script type="text/javascript"> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img"); if (n > slides.length) { slideIndex = 1; } if (n < 1) { slideIndex = slides.length; } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex-1].style.display = "block"; } document.getElementById("prevBtn").addEventListener("click", function() { plusSlides(-1); }); document.getElementById("nextBtn").addEventListener("click", function() { plusSlides(1); }); </script> </body> </html> ``` 该代码实现了一个基本的图片轮播效果，包含三张图片，循环播放。左右箭头可用于切换图片。

阅读全文