1.不同方式的圖片切換

功能點:
　　1.頁面默認循環切換,循環切換按鈕獲得焦點
　　2.點擊順序切換時,順序切換按鈕獲得焦點
　　　　點擊上一張時,當圖片為第一張時,圖片不再進行切換,圖片張數和描述也不在變動;
　　　　點擊下一張時,當圖片為最后一張時,圖片不再進行切換,圖片張數和描述也不在變動;
　　2.點擊上一張按鈕時觸發的事件
　　　　點擊上一張時,當圖片為第一張時,圖片切換到最后一張,圖片張數和描述顯示為對應圖片的張數和描述;
　　　　點擊下一張時,當圖片為最后一張時,圖片切換到第一張,圖片張數和描述顯示為對應圖片的張數和描述;
　　3.點擊左右按鈕是圖片內容/張數/描述進行相應的變動
開發思路:
　　1.實現圖片循序切換:
　　　　聲明變量num,使其初始值為0
　　　　上一張按鈕:每點擊一次,使num減1,當num的值小于0時,使其值等于圖片數組的長度減1;
　　　　下一張按鈕:每點擊一次,使num加1,當num的值大于等于圖片數組的長時,使其值0.
　　2.實現圖片順序切換:
　　　　上一張按鈕:每點擊一次,使num減1,當num的值小于0時,使其值等于0;
　　　　下一張按鈕:每點擊一次,使num加1,當num的值大于等于圖片數組的長時,使其值等于圖片數組的長度減1.
　　3.點擊左右按鈕觸發的事件:
　　　　根據num來改變相應的數值和索引值
　　4.實現切換方式的切換:通過判斷狀態按鈕的className來執行相應的事件函數

<div class="box"><input type="button" name="btn1" id="btn1" value="循環切換" class="act"/><input type="button" name="btn2" id="btn2" value="順序切換" /><div class="box1"><a href="javascript:;" id="lf_btn">&lt;</a><a href="javascript:;" id="rt_btn">&gt;</a><p>計算中...</p><img src=""/><p>計算中...</p></div> </div> *{margin: 0;padding: 0; } .box{width: 500px;margin: 50px auto 0;text-align: center; } input{width: 80px;height: 30px;background: #C0C0C0;border: none;margin: 0 5px; } .act{background: palevioletred; } .box1{width: 100%;height: 300px;position: relative;margin-top: 20px;background: #ccc; } .box1 img{width: 100%;height: 100%; } a{position: absolute;top: 50%;width: 50px;height: 50px;text-align: center;color: #fff;font-weight: bold;line-height: 50px;border-radius: 50%;text-decoration: none;background: #C0C0C0;opacity: .6;margin-top: -25px;font-size: 40px; } #lf_btn{left: 0; } #rt_btn{right: 0; } p{width: 100%;background: rgba(0,0,0,.5);height: 30px;color: #fff;position: absolute;left: 0;line-height: 30px; } p:nth-of-type(1){top: 0; } p:nth-of-type(2){bottom: 0; } a:hover{pacity: .8; } var lf_btn=document.getElementById("lf_btn"); var rt_btn=document.getElementById("rt_btn"); var oImg=document.getElementsByTagName("img")[0]; var aBtns=document.getElementsByTagName("input"); var arr=[["../demo/鑫/img/1.jpg","../demo/鑫/img/2.jpg","../demo/鑫/img/3.jpg","../demo/鑫/img/4.jpg","../demo/鑫/img/5.jpg"],["圖片一","圖片二","圖片三","圖片四","圖片五"]]; var ps=document.getElementsByTagName("p"); var num=0; var len=arr[0].length; //頁面初始化 fn1(); function fn1(){oImg.src=arr[0][num];ps[0].innerText=num+1+'/'+len;ps[1].innerText=arr[1][num]; } //圖片左右切換 //上一張 fn2(); function fn2(){lf_btn.onclick=function(){num--;if(num<0){num=len-1;}fn1();}//下一張rt_btn.οnclick=function(){num++;if(num>=len){num=0;}fn1();} }//切換方式轉換 //循環切換 var that=null; function clear(that){for (var i=0;i<aBtns.length;i++) {aBtns[i].className=" ";}that.className="act"; } aBtns[0].οnclick=function(){//上一張clear(this);fn2(); }//順序切換 aBtns[1].οnclick=function(){clear(this);//上一張lf_btn.οnclick=function(){num--;if(num<0){num=0;}fn1();}//下一張rt_btn.οnclick=function(){num++;if(num>=len){num=len-1;}fn1();}}

?2.自定義屬性圖片切換

HTML

<div id="box"><img src=""/><ul id="btns"></ul> </div>

CSS

*{margin: 0;padding: 0; } #box{margin: 20px 0 0 30px;position: relative;width: 400px;text-align: center; } #box ul{width: 100%;text-align: center; } #box li{list-style: none;display: inline-block;width: 40px;height: 10px;background: #C0C0C0;margin:0 2px; } #box img{width: 400px;height: 200px; } #box .act{background: palevioletred; }

JS部分

var oImg=document.getElementsByTagName("img")[0]; var oBtn=document.getElementById("btns"); var Btns=document.getElementsByTagName("li"); var str=""; var imgs=["http://tse4.mm.bing.net/th?id=OIP.eyrAJHrqfyG4JDdYH2R57gEsDg&w=214&h=160&c=7&qlt=90&o=4&pid=1.7","http://tse2.mm.bing.net/th?id=OIP.jYyuulCIIlC-0U8vLeZcPQEsCo&w=300&h=168&c=7&qlt=90&o=4&pid=1.7","http://tse3.mm.bing.net/th?id=OIP.nxOcHfdj3G4tfdQ1da34ngEXDf&w=223&h=174&c=7&qlt=90&o=4&pid=1.7","http://tse3.mm.bing.net/th?id=OIP.yfBtP9Yis8AFz3MIBMiEhgEyDM&w=300&h=200&c=7&qlt=90&o=4&pid=1.7","http://tse1.mm.bing.net/th?id=OIP.jAS8cEFr324zQBQjlfg1EAEyDM&w=297&h=193&c=7&qlt=90&o=4&pid=1.7"]; //頁面初始化 //生成切換按鈕 for (var i=0;i<imgs.length;i++) {str+="<li></li>"; } oBtn.innerHTML=str; oImg.src=imgs[0]; Btns[0].className="act";//按鈕點擊切換圖片，主要運用自定義屬性 for (var i=0;i<Btns.length;i++) {Btns[i].index=i;Btns[i].onclick=function(){for (var i=0;i<Btns.length;i++) {Btns[i].className=" ";}this.className="act";oImg.src=imgs[this.index];} }

?

轉載于:https://www.cnblogs.com/yangxue72/p/7514766.html

總結

以上是生活随笔為你收集整理的js图片切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。