js实现图片轮播定时器
时间: 2023-10-28 12:05:03 浏览: 45
可以使用JavaScript的setInterval()函数来实现图片轮播定时器。具体实现方式可以参考以下代码:
HTML代码:
```
<div class="slider">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
CSS代码:
```
.slider img {
display: none;
}
.slider img.active {
display: block;
}
```
JavaScript代码:
```
var sliderImages = document.querySelectorAll(".slider img");
var currentImage = 0;
function nextImage() {
currentImage++;
if (currentImage == sliderImages.length) {
currentImage = 0;
}
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].classList.remove("active");
}
sliderImages[currentImage].classList.add("active");
}
setInterval(nextImage, 3000);
```
上述代码中,首先获取到所有图片的DOM元素并保存在一个名为sliderImages的变量中。然后初始化一个变量currentImage来表示当前显示的图片的序号。接下来定义了一个名为nextImage的函数,该函数会将currentImage加1(如果超过了图片数量则会重置为0),然后将所有图片的CSS类active移除,再给当前图片的CSS类active添加上去。最后使用setInterval()函数每3秒调用一次nextImage函数来实现自动循环轮播。