本文实例为大家分享了js点击按钮实现多张图片循环切换的具体代码，供大家参考，具体内容如下
代码：
<!doctype html><html lang="ch"> <head> <meta char一步三回头t="utf-8"> <title>点击按钮实现多张图片的循环切换</title> <style type="text/css"> * { margin: 0; padding: 0; } .img-wrapper { width: 520px; height: 520px; background-size: contain; overflow: hidden; margin: 50px auto; background-color: green; } .img-wrapper img{ width: 533px; height: 300px; } .img-wrapper p { text-align: center; height: 20px; line-height: 20px; font-size: 16px; margin-bottom: 10px; 国家支持摆摊经济 margin-top: 8px; } .img-wrapper button { margin: 12px 93px; 可卡多少钱 font-size: 18px; } </style> <script type="text/javascript"> window.onload = function () { let prev = document.getelementbyid("prev"); let next = docume三氧化硫化学式nt.getelementbyid("next"); let img = document.getelementsbytagname("img")[0]; let info = document.getelementbyid("info"); //创建一个数组存储照片的路径 let imgarr = ["img/111.jpg", "img/222.jpg", "img/333.jpg", "img/444.jpg", "img/555.jpg", "img/666.jpg"]; let index = 0; info.innertext = "一共有" 对领导干部的评价+ imgarr.length + "张照片，现在是第" + (index + 1) + "张"; prev.onclick = function () { index--; prev.style.backgroundcolor="#ff4c31"; if (index < 0) { index = imgarr.length - 1; } img.src = imgarr[index]; info.innertext = "一共有" + imgarr.length + "张照片，现在是第" + (index + 1) + "张"; }; next.onclick = function () { index++; next.style.backgroundcolor="#ff4c31"; if (index > imgarr.length - 1) { index = 0; } img.src = imgarr[index]; info.innertext = "一共有" + imgarr.length + "张照片，现在是第" + (index + 1) + "张"; }; }; </script> </head> <body> <div class="img-wrapper"> <p id="info"></p> <img src="img/111.jpg"> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body></html>效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-04 18:20:16，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ac9655c4df54d2cbf8eb62e8218d3f3a.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：js点击按钮实现多张图片循环切换.doc
本文 PDF 下载地址：js点击按钮实现多张图片循环切换.pdf
| 留言与评论（共有 0 条评论） |
