首页js轮播图自动滑动效果，五张图轮动

js轮播图自动滑动效果，五张图轮动

时间: 2024-06-21 12:00:33 浏览: 166

JavaScript轮播图自动滑动效果通常使用动画和定时器来实现。以下是一个简单的示例，展示了如何创建一个基本的轮播图，包含五张图片，并每隔几秒自动切换到下一张： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .carousel { position: relative; width: 600px; height: 400px; } .carousel img { display: none; position: absolute; left: 0; top: 0; } .carousel .active { display: block; } .carousel-navigation { position: absolute; bottom: 10px; text-align: center; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" class="active" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> <img src="image5.jpg" alt="Image 5"> </div> <div class="carousel-navigation"> <button onclick="prevSlide()">Prev</button> <button onclick="nextSlide()">Next</button> </div> <script> var index = 0; var images = document.querySelectorAll('.carousel img'); function showSlide() { images[index].style.display = 'none'; images[(index + 1) % images.length].style.display = 'block'; index = (index + 1) % images.length; } function prevSlide() { if (index > 0) { showSlide(); } } function nextSlide() { showSlide(); } // 自动滑动，每5秒切换一次 setInterval(nextSlide, 5000); </script> </body> </html> ```

阅读全文