首页写一段在html中用css样式做轮播图每次轮换时间为3秒

写一段在html中用css样式做轮播图每次轮换时间为3秒

时间: 2024-05-02 13:22:43 浏览: 158

好的，以下是代码段： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <style> .slideshow { position: relative; height: 300px; overflow: hidden; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } </style> </head> <body> <div class="slideshow"> <div class="slide active"> <img src="image1.jpg" alt=""> </div> <div class="slide"> <img src="image2.jpg" alt=""> </div> <div class="slide"> <img src="image3.jpg" alt=""> </div> </div> <script> var slides = document.querySelectorAll('.slide'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 3000); function nextSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); } </script> </body> </html> ``` 在这段代码中，我们首先定义了一个容器 div，通过设置它的高度和 overflow 属性，使得容器内的元素可以进行上下滚动。然后定义了一个 slide 类，里面包含一张图片，再定义一个成员变量来控制当前处于激活状态的 slide。最后使用 JavaScript 来控制每3秒进行一次轮播，并且设置图片的透明度实现轮播效果。希望这个解答对您有帮助。

阅读全文