javascript自动轮播图代码
时间: 2023-07-09 12:27:54 浏览: 38
以下是一个简单的 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 {
width: 500px;
height: 300px;
overflow: hidden;
}
.slider img {
width: 500px;
height: 300px;
display: block;
}
```
JavaScript 代码:
```javascript
const slider = document.querySelector('.slider');
const images = document.querySelectorAll('.slider img');
let counter = 0;
const interval = setInterval(() => {
counter++;
if (counter === images.length) {
counter = 0;
}
slider.style.transform = `translateX(${-counter * 500}px)`;
}, 2000);
```
解释:
首先,我们通过 `document.querySelector` 方法获取 `.slider` 元素和 `.slider` 元素下的所有 `img` 元素。
然后,我们定义一个 `counter` 变量来跟踪当前显示的图片,以及一个 `interval` 变量来存储定时器的 ID。
接下来,我们使用 `setInterval` 方法来设置每隔 2 秒钟自动播放一张图片的定时器。在定时器的回调函数中,我们将 `counter` 变量加 1,并检查是否达到了图片数量的上限。如果达到了上限,我们将 `counter` 重置为 0。然后,我们使用 `slider.style.transform` 属性来将图片容器向左移动相应的距离,以显示下一张图片。
最后,我们将定时器的 ID 存储在 `interval` 变量中,以便以后可以通过调用 `clearInterval(interval)` 方法来停止自动播放。