写一个前端轮播图的代码
时间: 2023-05-20 11:04:04 浏览: 100
以下是一个简单的前端轮播图的代码:
HTML:
```
<div class="slider">
<div class="slide"><img src="slide1.jpg"></div>
<div class="slide"><img src="slide2.jpg"></div>
<div class="slide"><img src="slide3.jpg"></div>
</div>
```
CSS:
```
.slider {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
```
JavaScript:
```
const slides = document.querySelectorAll('.slide');
let currentSlide = 0;
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
setInterval(nextSlide, 5000);
```
这个代码会自动轮播三张图片,每张图片停留5秒钟,然后切换到下一张。