首页html5轮播图片循环代码

html5轮播图片循环代码

时间: 2024-06-11 12:01:06 浏览: 221

以下是一个基本的HTML5轮播图片循环的代码示例： ```html <!DOCTYPE html> <html> <head> <style> .slideshow { position: relative; width: 100%; height: 300px; overflow: hidden; } .slideshow img { position: absolute; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease-in-out; } </style> </head> <body> <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> <script> var slideshow = document.querySelector('.slideshow'); var images = slideshow.getElementsByTagName('img'); var currentSlide = 0; function showSlide() { for (var i = 0; i < images.length; i++) { images[i].style.display = 'none'; } images[currentSlide].style.display = 'block'; } function nextSlide() { currentSlide = (currentSlide + 1) % images.length; showSlide(); } setInterval(nextSlide, 3000); // 自动切换时间间隔（毫秒） showSlide(); // 初始化显示第一张图片 </script> </body> </html> ``` 这段代码创建了一个具有循环播放功能的HTML5轮播图片效果。它使用了CSS的`position`属性来设置轮播容器的位置和大小，并使用`overflow`属性来隐藏超出容器范围的图片。每张图片使用`position: absolute`来定位，并通过`transition`属性实现了渐变的切换效果。 JavaScript部分定义了一个`showSlide`函数，用于显示当前的图片，并通过`nextSlide`函数来切换到下一张图片。`setInterval`函数用于定时调用`nextSlide`函数，实现自动切换效果。

阅读全文