<div class="banner"> <!--轮播图部分--> <img src="img/1.jpg" alt="inte1" class="slide"> <img src="img/2.jpg" alt="inte2" class="slide"> <img src="img/3.jpg" alt="inte3" class="slide"> </div>实现轮播图效果打开页面自动播放
时间: 2023-07-06 09:17:32 浏览: 46
您可以使用 JavaScript 实现轮播图自动播放,可以通过以下步骤实现:
1. 获取轮播图中所有图片元素(使用 `querySelectorAll` 方法);
2. 定义一个变量 `slideIndex` 来记录当前显示的图片索引,初始值为 0;
3. 使用 `setInterval` 方法每隔一定时间(比如 3 秒)执行一次函数,该函数将会切换图片,具体操作如下:
- 将当前图片隐藏(设置 `display: none`);
- 更新 `slideIndex`,如果已经是最后一张图片,则重置为第一张图片;
- 显示下一张图片(移除 `display: none`)。
以下是一个简单的实现示例:
```html
<div class="banner">
<img src="img/1.jpg" alt="inte1" class="slide">
<img src="img/2.jpg" alt="inte2" class="slide">
<img src="img/3.jpg" alt="inte3" class="slide">
</div>
<script>
const slides = document.querySelectorAll('.slide');
let slideIndex = 0;
setInterval(() => {
slides[slideIndex].style.display = 'none';
slideIndex = (slideIndex + 1) % slides.length;
slides[slideIndex].style.display = 'block';
}, 3000);
</script>
```