用js写个自动轮播
时间: 2023-09-15 16:21:31 浏览: 65
好的,这里给您提供一个简单的 JavaScript 轮播图实现示例:
HTML 代码:
```html
<div class="slideshow-container">
<div class="slideshow-slide">
<img src="image1.jpg">
</div>
<div class="slideshow-slide">
<img src="image2.jpg">
</div>
<div class="slideshow-slide">
<img src="image3.jpg">
</div>
</div>
```
CSS 代码:
```css
.slideshow-container {
position: relative;
height: 400px;
}
.slideshow-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow-slide.active {
opacity: 1;
}
```
JavaScript 代码:
```javascript
const slides = document.querySelectorAll('.slideshow-slide');
let currentSlide = 0;
const slideInterval = setInterval(nextSlide, 2000);
function nextSlide() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
```
代码解析:
1. 首先通过 `document.querySelectorAll('.slideshow-slide')` 获取轮播图的每一张图片元素。
2. 定义一个变量 `currentSlide` 来记录当前显示的图片序号,默认为 0。
3. 使用 `setInterval` 函数来定时执行 `nextSlide` 函数,每 2 秒切换一张图片。
4. `nextSlide` 函数先将当前显示的图片元素的 `active` 类移除,然后将 `currentSlide` 的值加 1,并使用取模运算符确保 `currentSlide` 的值不超过图片元素的总数。
5. 最后将新的图片元素添加 `active` 类,使其显示出来。
以上就是一个简单的 JavaScript 轮播图实现示例,您可以根据自己的需求进行修改和优化。