超简单！HTML+CSS+JS实现图片自动轮播代码揭秘

以下是一个简单的HTML、CSS和JavaScript代码，用来实现几张图片的自动轮播： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Carousel</title> <style> .carousel { display: flex; overflow: hidden; width: 300px; height: 200px; margin: 0 auto; position: relative; } .carousel img { width: 100%; height: 100%; object-fit: cover; } </style> </head> <body> <div class="carousel"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <script> const carousel = document.querySelector('.carousel'); const images = document.querySelectorAll('.carousel img'); let currentIndex = 0; function showImage(index) { images.forEach((image, i) => { if(i === index) { image.style.display = 'block'; } else { image.style.display = 'none'; } }); } function nextImage() { currentIndex++; if(currentIndex >= images.length) { currentIndex = 0; } showImage(currentIndex); } setInterval(nextImage, 3000); </script> </body> </html> ``` 以上代码中，我们使用了HTML的`<img>`标签来展示轮播的图片，然后使用CSS来设置轮播容器的样式。JavaScript部分包括了切换图片和定时器来自动切换图片。这段代码可以实现在页面加载后自动轮播几张图片。 ######[AI写代码神器 | 1007点数解答 | 2024-06-19 15:30:33]

服务商

更多选项

快捷项

自定义