js如何用计时器循环图片
时间: 2024-05-01 11:21:20 浏览: 6
你可以使用 `setInterval()` 函数来实现定时循环图片。具体步骤如下:
1. 在 HTML 中创建一个 `img` 标签,设置一个唯一的 `id`。
2. 在 JavaScript 中获取该 `img` 标签的引用。
3. 创建一个数组,包含所有要循环的图片的 URL。
4. 使用 `setInterval()` 函数设置一个定时器,每隔一定时间切换一张图片。
5. 在定时器回调函数中,更新 `img` 标签的 `src` 属性为下一张图片的 URL。
以下是一个简单的示例代码:
HTML 代码:
```html
<img id="myImg" src="image1.jpg" alt="My Image">
```
JavaScript 代码:
```javascript
const img = document.getElementById('myImg');
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片 URL 数组
let index = 0; // 当前显示的图片索引
setInterval(() => {
index++; // 切换到下一张图片
if (index >= images.length) {
index = 0; // 如果已经循环到最后一张,重新从第一张开始
}
img.src = images[index]; // 更新图片 URL
}, 3000); // 每隔 3 秒切换一次图片
```
在上面的示例中,图片会每隔 3 秒循环切换到下一张。你可以根据需要修改定时器的时间间隔和图片 URL 数组。