js轮播图实现简单代码
时间: 2023-10-11 22:08:18 浏览: 33
以下是一个简单的 JavaScript 实现的图片轮播效果的代码:
HTML 代码:
```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 代码:
```css
.slider {
position: relative;
}
.slider img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.slider img.active {
opacity: 1;
}
```
JavaScript 代码:
```javascript
const slider = document.querySelector('.slider');
const images = slider.querySelectorAll('img');
let index = 0;
function showImage(n) {
images.forEach(image => image.classList.remove('active'));
images[n].classList.add('active');
}
function nextImage() {
index = (index + 1) % images.length;
showImage(index);
}
setInterval(nextImage, 3000);
```
这段代码实现了一个自动轮播的效果,每隔 3 秒钟自动切换图片。你可以根据自己的需求来修改代码。