js轮播图实现简单代码
时间: 2023-09-16 21:11:01 浏览: 41
以下是一个简单的 JavaScript 轮播图实现代码:
HTML 代码:
```html
<div class="slider">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
</div>
```
CSS 代码:
```css
.slider {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slider img.active {
opacity: 1;
}
```
JavaScript 代码:
```javascript
let images = document.querySelectorAll('.slider img');
let currentImage = 0;
setInterval(function() {
images[currentImage].classList.remove('active');
currentImage = (currentImage + 1) % images.length;
images[currentImage].classList.add('active');
}, 3000);
```
这段代码将每隔 3 秒钟切换轮播图,实现了一个简单的轮播效果。