完整代码:用JS切换图片
时间: 2023-09-12 09:12:53 浏览: 119
以下是完整的JS代码,实现了通过点击按钮切换图片的功能:
HTML代码:
```
<img id="myImage" src="image1.jpg">
<button onclick="changeImage()">切换图片</button>
```
JS代码:
```
// 获取<img>标签
var myImage = document.getElementById("myImage");
// 创建图片URL数组
var imageList = ["image1.jpg", "image2.jpg", "image3.jpg"];
// 创建当前图片索引变量
var currentIndex = 0;
// 切换图片函数
function changeImage() {
// 获取当前<img>标签和图片URL
var currentImage = imageList[currentIndex];
// 更新<img>标签的src属性
myImage.src = currentImage;
// 增加当前索引
currentIndex++;
// 如果当前索引超出数组范围,则将索引设置为0
if (currentIndex >= imageList.length) {
currentIndex = 0;
}
}
// 调用切换图片函数
changeImage();
```
注:此代码只能实现切换图片的功能,如果需要实现自动定时切换图片的功能需要在函数中添加定时器。
阅读全文