我們終於迎來了最完整的輪播圖
當然還是WebAPI做的
依舊和之前一樣，結構樣式只給程式碼，script裡面會有一些註釋
有的圖片路徑可能會報錯什麼的，因為我本來使用的是本地圖片，然後換成了臨時百度的圖片，圖片路徑出錯了你們要自己換圖片，反正是不要指望我了，嘻嘻

一、結構

<div class="all" id='box'>
  <div class="screen">
    <ul>
      <li><img src="http://ec4.images-amazon.com/images/I/41VCPfSzLUL.jpg" width="500" height="200"/></li>
      <li><img src="http://making-photos.b0.upaiyun.com/review_photos/64b043ceb8704fd2e921216aa812a1d0.jpg" width="500" height="200"/></li>
      <li><img src="http://img5.pcpop.com/ArticleImages/500x375/3/3270/003270084.jpg" width="500" height="200"/></li>
      <li><img src="http://imgsrc.baidu.com/forum/w=580/sign=0eb36175a144ad342ebf878fe0a30c08/e5025fda81cb39db296da4ced0160924aa18303b.jpg" width="500" height="200"/></li>
      <li><img src="http://imgsrc.baidu.com/forum/w=580/sign=6035eda2a18b87d65042ab1737092860/ae37dffaaf51f3de67a6e6f794eef01f3a29792a.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
      <!-- 動態建立的小方塊，新增在這裡，樣式已經給寫好了-->
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
 

二、樣式

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    
    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }
    
    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    
    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    
    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }
    
    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    
    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    
    .all ol li.current {
      background: yellow;
    }
    
    #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>
  //1 獲取元素
  var box = document.getElementById("box");
  var screenBox = box.children[0];//可視區域
  var imgWid = screenBox.offsetWidth;//圖片寬度
  var ul = screenBox.children[0];//要運動的ul
  var lisUl = ul.children;//所有的圖片li
  var ol = screenBox.children[1];//放置小方塊的位置
  var lisOl = ol.children;//要操作的小方塊（預設沒有內容，新增後會自動增加）
  var arrBox = box.children[1];//左右箭頭的父盒子
  var arrLeft = arrBox.children[0];
  var arrRight = arrBox.children[1];
  
  //2 動態建立元素部分(小方塊建立)
  var li;
  for (var i = 0; i < lisUl.length; i++) {
    li = document.createElement("li");
    li.innerText = i + 1;
    ol.appendChild(li);
  }
  
  //2.1 給第一個小方塊設定預設顏色
  lisOl[0].className = "current";
  
  //3 簡單輪播圖效果
  for (i = 0; i < lisOl.length; i++) {
    lisOl[i].index = i;
    lisOl[i].onclick = function () {
      //----新增步驟：點選按鈕1時，判斷，如果當前顯示的為假的第一張，直接抽回到0
      if (count == lisUl.length - 1) {
        ul.style.left = 0 + "px";
     //   count = 0;
      }
      
      
      //點選按鈕變色效果
      for (var i = 0; i < lisOl.length; i++) {
        lisOl[i].className = "";
      }
      this.className = "current";
      
      //根據當前按鈕的索引值設定ul的運動位置
      animate(ul, -this.index * imgWid);
      
      //由於需要讓左右箭頭操作與小方塊操作聯動，需要在點選小方塊時同步count的值，跟當前按鈕索引值相同
      count = this.index;
    }
  }
  
  
  //4 左右焦點圖效果
  
  var count = 0;//用於記錄滾出可視區域的圖片張數
  //對ul中的第一個li進行克隆操作，為了製作無縫滾動效果
  ul.appendChild(lisUl[0].cloneNode(true));
  
  arrRight.onclick = fun;
  
  arrLeft.onclick = function () {
    //當顯示的圖片為第一張時，如果點選左按鈕，需要抽回到假的第一張顯示的位置，count也需要對應設定
    if (count == 0) {
      ul.style.left = -(lisUl.length - 1) * imgWid + "px";
      count = lisOl.length;
    }
    count--;
    animate(ul, -count * imgWid);
    //根據count的值，設定對應的小方塊變色即可
    for (var i = 0; i < lisOl.length; i++) {
      lisOl[i].className = "";
    }
    lisOl[count].className = "current";
  }
  
  
  //5 自動播放
  //間隔一段時間，執行一下右按鈕的所有功能即可
  var timer = null;
  //timer = setInterval(fun,2000);
  
  //元素.click(); 用於直接觸發標籤的點選事件,不能採用函式體的書寫形式
  timer = setInterval(function () {
    arrRight.click();
  }, 2000);
  
  //滑鼠移入移出，對自動播放進行取消和重新設定
  //滑鼠移入移出顯示隱藏箭頭
  box.onmouseover = function () {
    arrBox.style.display = "block";
    clearInterval(timer);
  };
  box.onmouseout = function () {
    arrBox.style.display = "none";
    timer = setInterval(function () {
      arrRight.click();
    }, 2000);
  };
  
  function fun() {
    //點選右按鈕時檢測，如果當前顯示的為假的第一張，再次點選右按鈕時需要先進行抽回操作，然後再進行滾動即可
    if (count == lisOl.length) {//lisOl.length與lisUl.length-1的值相同，使用哪個都可以
      ul.style.left = 0 + "px";
      //ul的位置需要和count的值同步，設定left為0後，再將count設定為0
      count = 0;
    }
    count++;
    animate(ul, -count * imgWid);
    
    //點選左右按鈕時，設定小方塊變色效果
    //根據count的值，設定對應的小方塊變色即可
    for (var i = 0; i < lisOl.length; i++) {
      lisOl[i].className = "";
    }
    //如果count為5,lisOl.length,設定lisOl[0]類名操作
    if (count == lisOl.length) {
      lisOl[0].className = "current";
    } else {
      lisOl[count].className = "current";
    }
  }
  ;
  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>