首页能用html制作一个自动轮播的网页的代码吗？

能用html制作一个自动轮播的网页的代码吗？

时间: 2023-08-07 19:04:20 浏览: 107

当然可以，以下是一个简单的自动轮播的html代码示例： ```html <!DOCTYPE html> <html> <head> <title>自动轮播</title> <style> .carousel { position: relative; height: 400px; overflow: hidden; } .carousel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; } .carousel img.active { opacity: 1; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" class="active"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script> var images = document.querySelectorAll('.carousel img'); var index = 0; var intervalId = setInterval(function() { images[index].classList.remove('active'); index = (index + 1) % images.length; images[index].classList.add('active'); }, 3000); </script> </body> </html> ``` 这个示例中，我们使用了一个包含三张图片的轮播容器，每张图片的位置都是绝对定位。每隔3秒钟就会自动切换到下一张图片，实现自动轮播的效果。

阅读全文