js按钮图片显示,点击按钮切换图片

var var_insert_button_html = '<p style="text-align: center;"> <img id="btn_' + row_no + '" src="ext/icon_image/down1.png" width="25px" height="25px" alt="picture is missing" ng-click="show_all_shedules($event, ' + row_no + ')" ;/></p>';

图片路径:
1、index.html 与图片在一个文件夹下时,直接用图片的名字即可   src="311293.jpg"
2、.html文件与 img图片文件夹位于同一个文件夹下   
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要通过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]); }); ``` 使用以上代码,点击"上一张"按钮可以切换到前一张图片,点击"下一张"按钮可以切换到后一张图片

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值