js点击按钮切换图片
时间: 2023-11-30 07:02:30 浏览: 80
要通过JavaScript点击按钮切换图片,可以按照以下步骤进行操作:
1. 首先,获取按钮对象和img标签的属性。可以使用`getElementById`方法获取按钮对象,使用`getElementsByTagName`方法获取img标签对象。
2. 接着,通过JavaScript获取到img标签中的src属性,并对其进行修改。可以使用`getAttribute`方法获取src属性的值,使用`setAttribute`方法修改src属性的值。
3. 然后,为两个按钮添加单击响应函数。可以使用`addEventListener`方法为按钮对象添加单击事件监听器。
4. 最后,在响应函数中修改img标签中的src属性,实现图片切换。可以使用条件判断语句和递增/递减操作来修改index变量的值,并将对应索引的图片路径赋给img标签的src属性。
示例代码如下:
```javascript
// 获取按钮对象
var last = document.getElementById("last");
var next = document.getElementById("next");
// 获取img标签对象
var img = document.getElementsByTagName("img")[0];
// 创建一个数组来保存图片的路径
var imgArr = ["../img/js_image/复联一.webp","../img/js_image/复联二.webp","../img/js_image/复联三.webp","../img/js_image/复联四.webp","../img/js_image/复联五.webp","../img/js_image/复联六.webp",];
// 创建一个变量存储当前正在显示的图片的索引
var index = 0;
// 设置按钮的单击事件监听器
last.addEventListener("click", function() {
if (index > 0) {
index--;
}
img.setAttribute("src", imgArr[index]);
});
next.addEventListener("click", function() {
if (index < imgArr.length - 1) {
index++;
}
img.setAttribute("src", imgArr[index]);
});
```
使用以上代码,点击"上一张"按钮可以切换到前一张图片,点击"下一张"按钮可以切换到后一张图片。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)