帮我写一个JavaScript轮播图
时间: 2023-07-04 18:11:10 浏览: 42
当然可以!以下是一个简单的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;
width: 100%;
height: 300px;
overflow: hidden;
}
.slider img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease;
}
.slider img.active {
opacity: 1;
}
```
JavaScript:
```javascript
const slider = document.querySelector('.slider');
const slides = slider.querySelectorAll('img');
let currentSlide = 0;
function showSlide(n) {
slides[currentSlide].classList.remove('active');
slides[n].classList.add('active');
currentSlide = n;
}
function nextSlide() {
let next = currentSlide + 1;
if (next >= slides.length) {
next = 0;
}
showSlide(next);
}
setInterval(nextSlide, 3000);
```
这个轮播图会自动循环播放图片,每张图片停留时间为3秒钟,你可以根据需要修改这些时间。同时,你需要将图片的路径替换为你自己的图片路径。