js圖片切換

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];}
}

?