用js写一个图片轮播
时间: 2023-12-10 22:05:05 浏览: 22
以下是一个基本的图片轮播的JS代码示例:
HTML代码:
```
<div class="slider">
<img src="img1.jpg" class="active">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
```
CSS代码:
```
.slider {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider img.active {
opacity: 1;
}
```
JS代码:
```
var slider = document.querySelector('.slider');
var slides = slider.querySelectorAll('img');
var currentIndex = 0;
setInterval(function() {
slides[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % slides.length;
slides[currentIndex].classList.add('active');
}, 3000);
```
这个代码会每隔三秒钟自动切换图片,并且带有淡入淡出的效果。