首页帮我写一段轮播图代码并运行

帮我写一段轮播图代码并运行

时间: 2023-03-30 12:02:28 浏览: 105

以下是一个简单的轮播图代码，你可以在 HTML 中使用它： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> .container { position: relative; width: 800px; height: 400px; margin: auto; overflow: hidden; } .slide { position: absolute; top: ; left: ; width: 800px; height: 400px; opacity: ; transition: opacity 1s ease-in-out; } .slide.active { opacity: 1; } </style> </head> <body> <div class="container"> <img class="slide active" src="https://picsum.photos/id/237/800/400" alt="Slide 1"> <img class="slide" src="https://picsum.photos/id/238/800/400" alt="Slide 2"> <img class="slide" src="https://picsum.photos/id/239/800/400" alt="Slide 3"> </div> <script> let slides = document.querySelectorAll('.slide'); let currentSlide = ; let slideInterval = setInterval(nextSlide, 300); function nextSlide() { slides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].classList.add('active'); } </script> </body> </html> ``` 这段代码会创建一个宽度为 800px，高度为 400px 的轮播图容器，其中包含三张图片。每隔 3 秒钟，轮播图会自动切换到下一张图片。

阅读全文