原生js實(shí)現(xiàn)輪播圖實(shí)例教程

來(lái)源 |?http://www.fly63.com/article/detial/10125

?根據(jù)實(shí)例效果，需要的元素有圖片、中間圓點(diǎn)按鈕、左右箭頭按鈕等。實(shí)際html代碼如下所示：

  
    
    
    
    
    
  
  
    
1    
2    
3    
4    
5  
  
  

讀者可以根據(jù)實(shí)際效果自行編寫(xiě)樣式。

接下來(lái)完成JavaScript部分的代碼，先分析一下輪播圖的效果所需要的步驟。

1、獲取輪播圖各個(gè)html元素及聲明相關(guān)變量。如下所示：

  //獲取外包容器  var eContainer = document.getElementById('bannerContainer');  //獲取圖片總?cè)萜?/span>  var eImgBox = eContainer.getElementsByClassName('img_box')[0];  //獲取圖片容器列表  var aImgList = eImgBox.getElementsByTagName('div');  //獲取選擇按鈕容器  var eSelBox = eContainer.getElementsByClassName('sel_box')[0];  //獲取選擇按鈕  var aSelList = eSelBox.getElementsByTagName('li');  //獲取左按鈕  var eLeftBtn = eContainer.getElementsByClassName('left_btn')[0];  //獲取右按鈕  var eRightBtn = eContainer.getElementsByClassName('right_btn')[0];  //當(dāng)前圖片索引  var nIndex = 0;  //輪播圖自動(dòng)切換定時(shí)器  var timer = null;

2、設(shè)置圖片容器大小及位置
一般輪播圖的數(shù)量不是固定的，可能是3個(gè)，也可能是5個(gè)，所以 “圖片容器的寬度=外包容器寬度 * 輪播圖數(shù)量”，代碼如下：

  //獲取外包容器寬度  var nContainerW = eContainer.offsetWidth;  //設(shè)置圖片總?cè)萜鲗挾?/span>  eImgBox.style.width = nContainerW * aImgList.length + 'px';

3、設(shè)置默認(rèn)顯示圖片及選擇按鈕，本實(shí)例第一張圖為默認(rèn)圖片，代碼如下：

  //默認(rèn)顯示第一張圖片  eImgBox.style.left = '0px';  //默認(rèn)第一個(gè)選擇按鈕設(shè)為當(dāng)前選擇按鈕  aSelList[0].className = 'cur';

4、 給選擇按鈕綁定輪播圖切換事件，在這里把點(diǎn)擊事件委托給選擇按鈕容器，如下所示：

  eSelBox.addEventListener('click',function(event){    //獲取當(dāng)前點(diǎn)擊元素    var eTarget = event.target;    //判斷點(diǎn)擊的是li元素，且不是當(dāng)前選擇按鈕    if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'cur'){      //設(shè)置當(dāng)前圖片索引      nIndex = eTarget.innerHTML-1      //修改輪播圖容器位置，用于切換圖片      eImgBox.style.left = -nIndex * nContainerW + 'px';      //刪除所有選擇按鈕上的className      for(let i=0;i        aSelList[i].className = '';      }      //修改當(dāng)前選擇按鈕的className，設(shè)為當(dāng)前選擇按鈕      eTarget.className = 'cur';    }  });

輪播圖切換屬于本實(shí)例核心功能，在選擇數(shù)字按鈕時(shí)會(huì)切換；點(diǎn)擊左、右兩個(gè)按鈕時(shí)也會(huì)切換；圖片還會(huì)自動(dòng)切換。所以可以把切換圖片的功能封裝成一個(gè)函數(shù)，如下所示：

  //輪播圖切換  function fnSwitchImg(){    //修改輪播圖容器位置，用于切換圖片    eImgBox.style.left = -nIndex * nContainerW + 'px';    //刪除所有選擇按鈕上的className    for(let i=0;i      aSelList[i].className = '';    }    //修改當(dāng)前選擇按鈕的className，設(shè)為當(dāng)前選擇按鈕    aSelList[nIndex].className = 'cur';  }

那么第 4 步的代碼修改如下：

  //選擇按鈕綁定事件  eSelBox.addEventListener('click',function(event){    //獲取當(dāng)前點(diǎn)擊元素    var eTarget = event.target;    //判斷點(diǎn)擊的是li元素，且不是當(dāng)前選擇按鈕    if(eTarget.nodeName.toLowerCase() == 'li' && eTarget.className != 'cur'){      //設(shè)置當(dāng)前圖片索引      nIndex = eTarget.innerHTML-1      fnSwitchImg();    }  });

5、點(diǎn)擊左、右兩個(gè)按鈕也是可以切換圖片的，分別添加事件，代碼如下：

  eLeftBtn.onclick = function(){    if(nIndex<=0){      return; //如果當(dāng)前是第一張圖片，阻止后續(xù)代碼執(zhí)行    }    //往左切換圖片    nIndex --;    fnSwitchImg();  }  eRightBtn.onclick = function(){    if(nIndex>=aSelList.length-1){      return; //如果當(dāng)前是最后一張圖片，阻止后續(xù)代碼執(zhí)行    }    //往右切換圖片    nIndex ++;    fnSwitchImg();  }

6、給輪播圖添加自動(dòng)切換功能
完成這些步驟之后，輪播圖已能正常運(yùn)行，不過(guò)大部分輪播圖都是可以自動(dòng)切換的。所以還需要加上一個(gè)定時(shí)器功能，設(shè)置輪播圖自動(dòng)切換；當(dāng)鼠標(biāo)移入輪播圖的時(shí)候，需要移除定時(shí)器；鼠標(biāo)移出時(shí)再次啟動(dòng)定時(shí)器。如下所示：

  //輪播圖自動(dòng)切換  timer = setInterval(function(){    //向右切換圖片    nIndex ++;    //已切換到最后一張圖片時(shí)，跳回第一張圖片    if(nIndex>=5){      nIndex = 0;    }    fnSwitchImg();  },3000);
  //鼠標(biāo)滑入輪播圖停止自動(dòng)切換  eContainer.onmouseenter = function(){    clearInterval(timer);  }
  //鼠標(biāo)移出輪播圖開(kāi)始自動(dòng)切換  eContainer.onmouseleave = function(){    //輪播圖自動(dòng)切換    timer = setInterval(function(){      //向右切換圖片      nIndex ++;      //已切換到最后一張圖片時(shí)，跳回第一張圖片      if(nIndex>=5){        nIndex = 0;      }      fnSwitchImg();    },3000);  }

本實(shí)例圖片切換的動(dòng)畫(huà)效果使用的是css3的過(guò)渡動(dòng)畫(huà)，所以需要給相關(guān)元素添加transition樣式屬性。