原生js解決簡單輪播圖的切換

以前寫過過一種輪播圖的切換，是按照順序依次點擊依次更換圖片，此次的圖片切換主要是能夠有點相似京東的輪播圖，區別不一樣的是沒有加定時器，不能本身循環，而須要點擊任何一個下標，顯示當前所對應的圖片。

先來看看佈局html和css：

1 <div id="pic">
2     <img src="" />
3     <span>數量正在加載中……</span>
4     <p>文字說明正在加載中……</p>
5     <ul id="ul"></ul>
6 </div>

 1 <style>
 2         ul { padding:0; margin:0; }
 3         li { list-style:none; }
 4         #pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
 5         #pic img { width:400px; height:500px; }
 6         #pic ul { width:40px; position:absolute; top:0; right:-50px; }
 7         #pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
 8         #pic .active { background:#FC3; }
 9         #pic span { top:0; }
10         #pic p { bottom:0; margin:0; }
11         #pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
12     </style>

 沒有寫js的效果圖以下所示：

 要實現點擊 右上角的li中間的圖片進行切換，切換爲當前所對應的圖片，同時上面的數字標號和下面的文字說明也要改變，那麼來看js代碼：

 1 <script>
 2     window.onload= function(){
 3         var oImg=document.getElementsByTagName("img")[0];
 4         var oUl=document.getElementById("ul");
 5         var oSpan=document.getElementsByTagName("span")[0];
 6         var oPtxt=document.getElementsByTagName("p")[0];
 7         var arrImg=["img/pic1.jpg","img/pic2.jpg","img/pic3.jpg","img/pic4.jpg"];
 8         var arrPtxt=["圖1","圖2","圖3","圖4"];
 9 
10         //在ul裏追加li，li的數量等於數組的長度
11         for(var i=0;i<arrImg.length;i++){
12             oUl.innerHTML+="<li></li>";
13         }
14         var aLi=oUl.getElementsByTagName("li");//獲取li
15 
16         for(var i=0;i<aLi.length;i++){//循環li
17             aLi[i].index=i;//索引值，當前li等於i
18 
19             aLi[i].onclick=function(){
20                 oImg.src=arrImg[this.index];
21                 oPtxt.innerHTML=arrPtxt[this.index];
22                 oSpan.innerHTML=1+this.index+"/"+arrImg.length;
23                 for(var i=0;i<aLi.length;i++){
24                     aLi[i].className="";
25                 }
26                 this.className="active"
27             };
28 
29 
30         }
31 
32     }
33 </script>

來看效果土，不是gif的，大概看一下應該就瞭解了：

其實寫這類輪播圖的有幾點思路必定要理清楚：

1.必定要獲取到須要用到的id或者標籤；

2.如果不知道右上角li（也有多是下標即點擊的對象）的數量的話 ，要追加出來，而後獲取到它；

3.最重要的就是for循環了，循環每個li，而後給其賦值，添加圖片，必定要記得寫索引，點擊當前就讓它獲取到當前的內容；

4.這個案例中還有一個重要的是細節是右上角的li也就是點擊對象須要添加激活狀態的class，那麼咱們就能夠在循環這些li的時候把它的class清空，而後每一次點擊給其加上選中的class便可 。

好了，這就是今天案例的思路了，不過之後在項目中也可能會遇到一樣的，那麼分析的思路是同樣的，但願對你們有幫助！今天就到這裏了，加油！