利用JavaScript怎么对多张图片进行切换 - 行业资讯 - 肥雀云

　　介绍

利用JavaScript怎么对多张图片进行切换?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

html部分

& lt; body> 　　,& lt; div 类=皁uter"比; 　　& lt;才能p id=癷nfo"祝辞& lt;/p> 　　& lt;才能img src=https://www.yisu.com/zixun/薄?图片/banner1.png”alt="图片“title=巴计? 　　　　<按钮id=吧弦灰场?上一张> 下一张> 　　　　

css部分

& lt; style> 　　*,{才能　　,,,填充:0; 　　,,,保证金:0; 　　,,} 　　　　.outer {才能　　,,,宽度:1000 px; 　　,,,背景颜色:#论坛; 　　,,,保证金:50 px 汽车; 　　,,,text-align:中心; 　　,,,填充:10 px; 　　,,} 　　　　img {才能　　,,,宽度:900 px; 　　,,,显示:块; 　　,,,保证金:0,汽车; 　　,,} 　　　　button {才能　　,,,保证金:5 px; 　　,,} 　　& lt;/style>

JavaScript部分

这里用到了JavaScript的DOM对象

& lt; script>//,才能加载文档　　时间=window.onload 才能;function (), { 　　,,//获取img标签　　,,var img =, document.getElementsByTagName (“img") [0]; 　　,, 　　,,//创建一个数组保存所有图片的路径　　,,//这里设置图片文件的路径　　,,var imgArr =,(“。/图片/banner1.png",,“。/图片/banner2.png",,“。/图片/banner3.png",,“。/图片/banner4.png",,“。/图片/banner5.png"]; 　　,,//设置图片初始值　　,,var index =, 0; 　　,,//获取p id为信息的标签　　,,var info =, . getelementbyid (“info"); 　　,才能info.innerHTML =,“一共“,+,imgArr.length +,“张,,,+,“当前为第“,+,(时间+ index 1), +,“张“; 　　　　,,//绑定两个按钮　　,,//上一张　　,,. getelementbyid (“prev") .onclick =, function (), { 　　,,,指数——; 　　,,,//判断指数是否小于0 　　,,,if (index & lt;, 0), { 　　,,,,index =, imgArr.length 作用;1;//循环(第一张——》最后一张) 　　,,,} 　　,,,img.src =, imgArr(指数); 　　,,,info.innerHTML =,“一共“,+,imgArr.length +,“张,,,+,“当前为第“,+,(时间+ index 1), +,“张“; 　　,,}; 　　,,//下一张　　,,. getelementbyid (“next") .onclick =, function (), { 　　,,,指数+ +; 　　,,,//判断指数是否大于数组的长度1(数组的最大下标) 　　,,,if (index 祝辞,imgArr.length 作用;1),{ 　　,,,,index =, 0;//循环(最后一张——》第一张) 　　,,,} 　　,,,img.src =, imgArr(指数); 　　,,,info.innerHTML =,“一共“,+,imgArr.length +,“张,,,+,“当前为第“,+,(时间+ index 1), +,“张“; 　　,,} 　　,,}; 　　　　& lt;/script>

关于利用JavaScript怎么对多张图片进行切换问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。