首页html轮播图4张图片

html轮播图4张图片

时间: 2023-12-23 14:31:25 浏览: 28

好的，以下是一个只包含4张图片的简单HTML轮播图示例： ```html <!DOCTYPE html> <html> <head> <style> #slideshow { margin: 50px auto; position: relative; width: 500px; height: 300px; overflow: hidden; } #slideshow img { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } #slideshow img.active { opacity: 1; } </style> </head> <body> <div id="slideshow"> <img src="image1.jpg" alt="Image 1" class="active"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> <script> var images = document.querySelectorAll('#slideshow img'); var currentImageIndex = 0; function changeImage() { images[currentImageIndex].classList.remove('active'); currentImageIndex = (currentImageIndex + 1) % images.length; images[currentImageIndex].classList.add('active'); } setInterval(changeImage, 3000); </script> </body> </html> ``` 在这个示例中，我们使用了一个简单的JavaScript函数来切换图片。每隔3秒钟，当前显示的图片将被隐藏，下一张图片将被显示出来。你可以根据需要修改图片路径和样式。