輪播圖是前端最基本、最常見的功能，不論web端還是移動端，大平臺還是小網站，大多在首頁都會放一個輪播圖效果。本教程講解怎麼實現一個簡單的輪播圖效果。學習本教程之前，讀者需要具備html和css技能，同時需要有簡單的JavaScript基礎。

本例項效果如下圖所示：

根據例項效果，需要的元素有圖片、中間圓點按鈕、左右箭頭按鈕等。實際html程式碼如下所示：

<div class="banner_container" id="bannerContainer">
  <div class="img_box"><!--圖片元素-->
    <div><img src="img/1.jpg" alt=""></div>
    <div><img src="img/2.jpg" alt=""></div>
    <div><img src="img/3.jpg" alt=""></div>
    <div><img src="img/4.jpg" alt=""></div>
    <div><img src="img/5.jpg" alt=""></div>
  </div>
  <ul class="sel_box"><!--選擇按鈕-->
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <div class="left_btn btn"></div><!--左切換按鈕-->
  <div class="right_btn btn"></div><!--右切換按鈕-->
</div>
 

讀者可以根據實際效果自行編寫樣式。

接下來完成JavaScript部分的程式碼，先分析一下輪播圖的效果所需要的步驟。

1. 獲取輪播圖各個html元素及宣告相關變數。如下所示：

  //獲取外包容器
  var eContainer = document.getElementById('bannerContainer');
  //獲取圖片總容器
  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];
  //當前圖片索引
  var nIndex = 0;
  //輪播圖自動切換定時器
  var timer = null;
 

2. 設定圖片容器大小及位置
一般輪播圖的數量不是固定的，可能是3個，也可能是5個，所以 “圖片容器的寬度=外包容器寬度 * 輪播圖數量”，程式碼如下：

  //獲取外包容器寬度
  var nContainerW = eContainer.offsetWidth;
  //設定圖片總容器寬度
  eImgBox.style.width = nContainerW * aImgList.length + 'px'; 

3. 設定預設顯示圖片及選擇按鈕，本例項第一張圖為預設圖片，程式碼如下：

  //預設顯示第一張圖片
  eImgBox.style.left = '0px';
  //預設第一個選擇按鈕設為當前選擇按鈕
  aSelList[0].className = 'cur';
 

4. 給選擇按鈕繫結輪播圖切換事件，在這裡把點選事件委託給選擇按鈕容器，如下所示：

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

輪播圖切換屬於本例項核心功能，在選擇數字按鈕時會切換；點選左、右兩個按鈕時也會切換；圖片還會自動切換。所以可以把切換圖片的功能封裝成一個函式，如下所示：

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

那麼第 4 步的程式碼修改如下：

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

5. 點選左、右兩個按鈕也是可以切換圖片的，分別新增事件，程式碼如下：

  eLeftBtn.onclick = function(){
    if(nIndex<=0){
      return; //如果當前是第一張圖片，阻止後續程式碼執行
    }
    //往左切換圖片
    nIndex --;
    fnSwitchImg();
  }
  eRightBtn.onclick = function(){
    if(nIndex>=aSelList.length-1){
      return; //如果當前是最後一張圖片，阻止後續程式碼執行
    }
    //往右切換圖片
    nIndex ++;
    fnSwitchImg();
  }

https://www.houdianzi.com/cdlogo/ 成都logo設計

6. 給輪播圖新增自動切換功能
完成這些步驟之後，輪播圖已能正常執行，不過大部分輪播圖都是可以自動切換的。所以還需要加上一個定時器功能，設定輪播圖自動切換；當滑鼠移入輪播圖的時候，需要移除定時器；滑鼠移出時再次啟動定時器。如下所示：

  //輪播圖自動切換
  timer = setInterval(function(){
    //向右切換圖片
    nIndex ++;
    //已切換到最後一張圖片時，跳回第一張圖片
    if(nIndex>=5){
      nIndex = 0;
    }
    fnSwitchImg();
  },3000);

  //滑鼠滑入輪播圖停止自動切換
  eContainer.onmouseenter = function(){
    clearInterval(timer);
  }

  //滑鼠移出輪播圖開始自動切換
  eContainer.onmouseleave = function(){
    //輪播圖自動切換
    timer = setInterval(function(){
      //向右切換圖片
      nIndex ++;
      //已切換到最後一張圖片時，跳回第一張圖片
      if(nIndex>=5){
        nIndex = 0;
      }
      fnSwitchImg();
    },3000);
  }

本例項圖片切換的動畫效果使用的是css3的過渡動畫，所以需要給相關元素新增transition樣式屬性。