顧名思義， 這個輪播圖只有左右兩個焦點，只能左右滑動。

一、結構

<div id="box" class="all">
  <div class="ad">
    <ul id="imgs">
	  <li><img src="http://hbimg.b0.upaiyun.com/0df190ee7aed45f30805485f8e9a00846f09495ba2ae-fGckkT_fw658"/></li>
      <li><img src="http://5b0988e595225.cdn.sohucs.com/images/20171125/8a92f8cce83d4b2db376f27fb0262941.jpg"/></li>
      <li><img src="http://hbimg.b0.upaiyun.com/dd3d0d33846925440b81a20fa7d0c326bf0eee0a127ea-V03kW6_fw658"/></li>
      <li><img src="http://www.people.com.cn/mediafile/pic/20140912/38/6341491308546800626.jpg"/></li>
      <li><img src="http://hbimg.b0.upaiyun.com/7bb8151b5919d3f557b5f51722a1bba02f3d70b6c26a-EttpjW_fw658"/></li>
    </ul>
  </div>
  <div id="arr">
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
  </div>
</div>
 

二、樣式

<style>
    body, ul, ol, li, img {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    #box {
      width: 490px;
      height: 270px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }
    
    .ad {
      width: 490px;
      height: 270px;
      overflow: hidden;
      position: relative;
    }
    
    #box img {
      width: 490px;
    }
    
    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    
    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }
    
    .ad ol li.current {
      background: yellow;
    }
    
    .ad ul li {
      float: left;
    }
    
    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }
    
    .ad ul li.current {
      display: block;
    }
    
    #arr {
      display: none;
    }
    
    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑體';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }
    
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
 

三、行為

script最重要，所以只有它才有註釋~~~~~

<script>
  //1 獲取元素
  var box = document.getElementById("box");
  var ad = box.children[0];//可視區域
  var imgWidth = ad.offsetWidth;//獲取可視區域寬度
  var list = ad.children[0];
  var lisLen = list.children.length;
  var arrBox = box.children[1];
  var arrLeft = arrBox.children[0];
  var arrRight = arrBox.children[1];
  
  //2 滑鼠移入移出大盒子，設定內部的箭頭顯示隱藏
  box.onmouseover = function () {
    arrBox.style.display = "block";
  };
  box.onmouseout = function () {
    arrBox.style.display = "none";
  };
  
  //3 左右箭頭操作
  //可以使用計數的方式，記錄當前滾出可視區域的圖片張數，根據張數設定運動效果
  var count = 0;
  
  arrRight.onclick = function () {
    //設定count的取值範圍
    //向右點選時最大值為4，可以使用lisLen-1表示，只有小於4時才可以執行操作
    if (count < lisLen - 1) {
      count++;
      //根據count，設定ul的運動位置
      animate(list, -count * imgWidth);
    }
  };
  
  arrLeft.onclick = function () {
    //向左點選時最小值為0，所以大於0時才可以進行操作
    if(count > 0){
      count--;
      animate(list, -count * imgWidth);
    }
  };
  
  
  function animate(element, target) {
    clearInterval(element.timer);//清除舊的定時器，保證勻速運動，防止加速效果
    element.timer = setInterval(function () {
      //1 獲取元素當前位置 使用offsetLeft屬性
      var current = element.offsetLeft;
      //2 設定步長
      var step = 17;
      //根據當前位置和目標位置的大小關係進行判斷
      step = target > current ? step : -step;
      //5 運動條件設定
      //檢測當前位置和目標位置之間的距離，如果滿足一個step的距離，可以運動，否則直接運動到目標位置，結束
      if (Math.abs(target - current) > Math.abs(step)) {
        //3 設定運動公式:元素位置(新) = 元素位置(舊) + 步長;
        current = current + step;
        //4 設定給元素的left值運動
        element.style.left = current + "px";
      } else {
        //6 讓element直接運動到目標位置，再清除定時器
        element.style.left = target + "px";
        clearInterval(element.timer);
      }
    }, 20);
  }
</script>