首页写一个html轮播图

写一个html轮播图

时间: 2023-12-23 18:28:10 浏览: 73

以下是一个简单的HTML轮播图的示例： ```html <!DOCTYPE html> <html> <head> <title>HTML轮播图</title> <style> .slideshow { width: 500px; height: 300px; overflow: hidden; position: relative; } .slideshow img { width: 100%; height: 100%; object-fit: cover; } .slideshow .item { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow .item.active { opacity: 1; } </style> </head> <body> <div class="slideshow"> <div class="item active"> <img src="image1.jpg" alt="Image 1"> </div> <div class="item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="item"> <img src="image3.jpg" alt="Image 3"> </div> </div> <script> var items = document.querySelectorAll('.item'); var currentIndex = 0; var totalItems = items.length; function slide() { var currentItem = items[currentIndex]; currentItem.classList.remove('active'); currentIndex = (currentIndex + 1) % totalItems; var nextItem = items[currentIndex]; nextItem.classList.add('active'); } setInterval(slide, 2000); </script> </body> </html> ``` 这个示例中，我们使用了HTML、CSS和JavaScript来创建一个简单的轮播图。轮播图的容器使用了一个具有固定宽度和高度的div元素，并设置了overflow:hidden来隐藏超出容器范围的图片。每张图片都被包裹在一个具有.item类的div元素中，并且通过设置position:absolute来使它们重叠在一起。通过JavaScript代码，我们实现了图片的切换效果，每隔2秒钟切换到下一张图片。

阅读全文