图片轮播脚本可以怎么写
时间: 2024-05-07 10:16:32 浏览: 7
以下是一种简单的图片轮播脚本:
HTML:
```
<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
```
CSS:
```
.slideshow {
position: relative;
width: 100%;
height: 400px;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow img.active {
opacity: 1;
}
```
JavaScript:
```
let slideshow = document.querySelector('.slideshow');
let images = document.querySelectorAll('.slideshow img');
let index = 0;
setInterval(() => {
images[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
}, 3000);
```
这个脚本使用了 setInterval() 方法,每隔三秒钟就会切换一张图片。当切换到下一张图片时,当前图片的 active 类会被移除,下一张图片的 active 类会被添加,从而实现图片的轮播效果。