輪播圖超級詳細源代碼代碼以及詳細解釋

最下方有源碼文件！！！！

 

這里面我封裝了一個animate.js這個js代碼主要實現的是ul的移動,按鈕事件處理函數中的代碼(讓一個元素,從左往右,或者從右往左緩慢移動)（可參考之前寫的簡單動畫案例）

 

animate.js代碼

//封裝 按鈕事件處理函數中的代碼(讓一個元素,從左往右,或者從右往左緩慢移動)
/*
 * 作用: 讓一個元素,從左往右,或者從右往左緩慢移動
 * element: 要求傳入一個元素  元素
 * target : 元素移動的目標位置  數字
 * step: 步進(每次元素移動的距離)
 * callback : 回調函數  到達目標位置之后,會被調用
 * */

function animate(element, target, step, callback){

//    清除定時器
    if(element.timeid){
        clearInterval(element.timeid);
    }

//    1. 設置定時器
    element.timeid =  setInterval(function(){
//        2. 獲取元素的當前位置
        var current = element.offsetLeft;
//        3. 根據當前位置加上/減去我們的步進
//         如果當前位置大於目標位置,就是減去步進.否則就是加上步進
        if(current > target){
//            證明是從右往左,應該減去step
            var pos = current - step;
        }else{
            // 證明是從左往右,應該加上step
            var pos = current + step;
        }
        
        //          4. 給element賦值新的位置
        element.style.left = pos + 'px';

//          5. 判斷是否到達目標位置,如果到達目標位置就停下來
//          5.1 如何判斷已經到達目標位置
//              如果 當前位置(賦值之后的位置 pos)- 目標位置 的差值絕對值,小於步進,證明馬上要到目標位置了
        if(Math.abs(pos - target) <= step){
            //證明馬上就要到達目標位置了
//              5.2  清除定時器,直接把目標位置給元素
            clearInterval(element.timeid);
            element.style.left = target + 'px';
            //判斷用戶有沒有傳第四個參數,如果傳了就調用,如果沒傳就不調用
//        如果傳入了函數,callback轉換成布爾就是true,如果什么都沒傳,callback轉換成布爾,就是false
            if(callback){
                callback();
            }
        }
        
    }, 15);
}

在 輪播圖.html中填入（style代碼，盒子代碼（放在body里面），script代碼）

style代碼

<style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    
    .all {
      width: 500px;
      height: 300px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }
    
    .screen {
      width: 500px;
      height: 300px;
      overflow: hidden;
      position: relative;
    }
    
    .screen li {
      width: 500px;
      height: 300px;
      overflow: hidden;
      float: left;
    }
    
    .screen ul {
      position: absolute;
      left: 0px;
      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;
      z-index: 1000;
      
    }
    
    #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>

 

盒子代碼

<div class="all" id='box'>
  <div class="screen" id="screen">
    <ul>
      <li>
        <img src="images/1.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="images/2.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="images/3.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="images/4.jpg" width="500" height="300"/>
      </li>
      <li>
        <img src="images/5.jpg" width="500" height="300"/>
      </li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr">
    <span id="left">&lt;</span>
    <span id="right">&gt;</span>
  </div>
</div>

script代碼

<script src="animate.js"></script>
<script>
  //需求:
  //        1. 根據ul中li的個數,動態的創建出ol中的li(數字按鈕)
  //          1.1 獲取元素 ul, ul里面的li, ol
  var screen = document.getElementById('screen');
  var ul = screen.getElementsByTagName('ul')[0];
  var lis = ul.children;
  var ol = screen.getElementsByTagName('ol')[0];
  var indexGlobal = 0; //用於存儲當前展示的是哪張圖片的下標


 

  //          1.2 遍歷ul里面的li
  for (var i = 0; i < lis.length; i++) {
    // 1.3 在遍歷的過程中,動態的創建ol中的li,然后把新創建的li放到ol中
    var li = document.createElement('li');
    //由於點擊的時候,需要獲取當前li的下標,所以在創建的時候就存儲一下
    li.setAttribute('index', i);
    // 1.4 給每一個數字按鈕,添加數字
    li.innerText = i + 1;
    //1.5 默認一打開,展示第一個圖片,所以要給數字按鈕1默認高亮
    if (i == 0) {
//                    li.style.backgroundColor = 'yellow';
      li.className = 'current';
    }
    ol.appendChild(li);
    
    
    //       2. 點擊數字按鈕,讓輪播圖滾動(修改ul的left).
    //        2.1 獲取元素 ol里面的li
    //        2.2 給每一個ol中的li注冊點擊事件
    li.onclick = fn;
  }

  //要實現無縫輪播的效果,需要克隆第一張圖放到最后面
//  注意:一定要在數字按鈕,創建完畢之后在克隆
  var newone = lis[0].cloneNode(true);
  ul.appendChild(newone);
  console.log(lis);
  
  //        數字按鈕li的事件處理函數
  function fn() {
    //  2.3 在事件處理函數中,修改ul的left
//            2.3.1 目標值是多少?
//                目標值 = 當前圖片的下標 * 圖片的寬度
//                目標值 = 數字按鈕的下標(this.getAttribute('index') * screen的寬度(screen.offsetWidth)
//            console.log(this);
    
    var target = this.getAttribute('index') * screen.offsetWidth;
//            2.3.2  將目標值賦值為ul, 注意值是負值
//            ul.style.left = -target + 'px'; //直接到了目標位置
    //我們需要慢慢滾動過去
    animate(ul, -target, 20);
//            2.4 點擊哪個數字按鈕,就讓誰高亮
    //排他
    for (var i = 0; i < ol.children.length; i++) {
      ol.children[i].className = '';
    }
    this.className = 'current';
    
//    /動態的修改indexGlobal的值,因為indexGlobal要時刻和展示的圖片的下標保持一致
    indexGlobal = this.getAttribute('index');
    console.log(indexGlobal);
    
  }
  
  //3. 鼠標移入到box中,arr展示,鼠標移出到box外,arr消失
  //3.1 獲取元素
  var box = document.getElementById('box');
  var arr = document.getElementById('arr');
  //        3.2 給box注冊鼠標移入,移出事件
  box.onmouseenter = function () {
    //        3.3 移入事件,arr展示
    arr.style.display = 'block';
    
    // 7.1 鼠標移入停止自動輪播
    clearInterval(timeid);
  }
  box.onmouseleave = function () {
    //        3.5 移出事件,arr消失
    arr.style.display = 'none';
    
    //7.2 鼠標移出,開始自動輪播
    timeid = setInterval(function(){
      right.onclick();
    }, 3000); //注意: 自動輪播的時間不能太短,因為圖片滾動也需要時間
  
  
  }
  
  //4. 點擊右邊的arr,滾動到下一張圖
  //        4.1 獲取元素
  var right = document.getElementById('right');
  //        4.2 給right注冊點擊事件
  right.onclick = function () {
    //        4.3 在事件處理函數中,滾動到下一張圖
    //    4.3.1 當前是哪一張? 通過indexGlobal獲取到當前的下標
    // 4.4 判斷當前是否是第5張圖,如果是第5張圖,就需要自己寫代碼,慢慢滾動到第6張
    if(indexGlobal == ol.children.length - 1){
      //證明是第5張,需要自己寫代碼,滾動過去,實現高亮
//      4.4.1 滾動到第6張
      indexGlobal++;
      //計算展示第6張圖,ul應該處於的位置
      var target = indexGlobal * screen.offsetWidth;
      animate(ul,-target, 20, function(){
        //4.4.2 滾動到第6張之后,要立刻跳到第一張
        ul.style.left = '0px';
        //indexGlobal應該和展示的圖片保持一致
        indexGlobal = 0;
      });
      
//      4.4.3 實現高亮
      //排他
      for (var i = 0; i < ol.children.length; i++) {
        ol.children[i].className = '';
      }
      ol.children[0].className = 'current';
      
    }else{
 
//    4.3.2 根據當前找到下一個數字按鈕,觸發數字按鈕的點擊事件
      indexGlobal++;
//    console.log(ol.children[indexGlobal]);
      ol.children[indexGlobal].onclick();
    }

    
    
  
  }
  
  
  // 5. 點擊左邊的arr,滾動到上一張圖
//  5.1 獲取元素
    var left = document.getElementById('left');
//  5.2 給left注冊點擊事件
    left.onclick = function(){
      //  5.3 在事件處理函數中,根據當前的圖片,展示上一張
      //5.3.1 判斷當前展示的是不是第一張,如果是第一張,直接跳到最后一張,然后滾動到第5張
      if(indexGlobal == 0){
        //直接跳到最后一張
        indexGlobal = ol.children.length;
        ul.style.left = -indexGlobal * screen.offsetWidth + 'px';
        //然后再滾動到第五張
        indexGlobal--;
        ol.children[indexGlobal].onclick();
        
      }else{
        indexGlobal--;
        ol.children[indexGlobal].onclick();
      }
    
    }

  
// 6. 讓輪播圖自動輪播
  var timeid = setInterval(function(){
    right.onclick();
  }, 3000); //注意: 自動輪播的時間不能太短,因為圖片滾動也需要時間


</script>

源碼連接

https://www.lanzous.com/i7enozi
密碼:c851