利用JavaScript jQuery實現圖片無限循環輪播(不借助於輪播插件)-----轉載

前言

　　做爲一個前端工程師，不管公司是什麼行業，不管你作什麼端，基本都會遇到一個避不開的動畫效果：循環輪播。作輪播並不難，市場上的輪播插件有不少，其中比較著名的是swiper，使用也很是簡單。但輪播插件這種東西總歸是不靈活的，一些簡單的場景還能夠應付，比較複雜一點的場景處理起來就比較麻煩了。今天我會全程帶你們來寫一個循環輪播，用到的技術有：html、css、JavaScript、jQuery，都是前端最基礎的技術，有基礎又愛學肯學的你必定一聽就會，若是不會咋整？那多看幾遍。😆

　　1. 效果展現

　　以小米官網的圖片輪播爲例，實際上千篇一概，好啦，看下圖：

　　　好啦，看效果，不要看妹子，雖然妹子長得是很好看啦！

 

　　2. 原理分析

　　無限循環輪播的原理是在展現內容的先後各放一組圖片，以無限循環展現3張照片爲例，三張圖片我給它取名爲1.jpg,2.jpg,3.jpg,圖片展現分別以下：

　　

 

　　原理示意圖展現：

　　原理其實就是複製兩組一樣的照片分別放在前面和後面(實際上不用徹底複製兩組，只須要前面能夠到1.jpg，後面也能夠到1.jpg就行了，但這裏我爲了方便你們理解，就採用這樣的方式了)。當點左邊按鈕，圖片輪播到第一張1.jpg時，讓盛放圖片的容器瞬間拉回到第二張1.jpg照片的位置，注意必定要是瞬間。同理，當點右邊按鈕時，圖片輪播到第三張1.jpg的時候，也讓盛放圖片的容器瞬間拉回到第二張1.jpg照片的位置。這是實現圖片循環輪播的關鍵，稍後會仔細講解。

　　3. 代碼

　　html代碼：

<div class="slideImageContainer">
    <div class="slideImageLists">
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
        <img src="1.jpeg" />
        <img src="2.jpeg" />
        <img src="3.jpeg" />
    </div>
    <div class="slideLeftBtn" id="slideLeftBtn">&#xe60f;</div>
    <div class="slideRightBtn" id="slideRightBtn">&#xe60e</div>
</div>

 

　　css 代碼：

*{
    padding: 0;
    margin: 0;
}
@font-face {
    font-family: 'iconfont';  /* project id 208314 */
    src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.eot');
    src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.woff') format('woff'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.svg#iconfont') format('svg');
}
.slideImageContainer{
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    border: solid 1px red;
    overflow: hidden;
}
.slideImageLists{
    position: absolute;
    left: -1800px;
    top: 0;
    width: 10000px;
    height: 300px;
}
.slideImageLists img{
    display: block;
    width: 600px;
    height: 300px;
}
.slideLeftBtn,.slideRightBtn{
    position: absolute;
    font-family: "iconfont";
    font-size: 60px;
    top: 120px;
    color: #191f25;
    opacity: 0.3;
    cursor: pointer;

    user-select: none;  
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.slideLeftBtn:hover,.slideRightBtn:hover{
    opacity: 0.6;
}
.slideLeftBtn{
    left: 10px;
}
.slideRightBtn{
    right: 10px;
}

 

　　頁面佈局是很重要的一部份內容，它是頁面的基石。頁面佈局寫得好實現效果的時候能帶來很大的方便。所以這裏強調幾個應該注意的地方：

　　1.  全部的圖片要放在一個很長的容器中，這裏是slideImageList，每次移動實際上就是它在相對於他的父元素slideImageContainer而移動，因此須要給slideImageContainer 一個 position:relative 的定位，給 slideImageList 一個 position: absoluete 的定位。

　　2. slideImageList要放在一個比較小的容器中，在這裏是slideImageContainer，做用是爲了顯示你想要顯示的區域，注意要加 overflow:hidden 屬性，讓多餘的內容不顯示。

　　3. 左右按鈕我採用的是iconfont的使用方式，這個比較簡單，此處很少加以闡述。不會使用iconfont的同窗能夠直接貼兩個圖片或者左右箭頭符號在上面。

　　4. 容器slideImageList中的圖片要排列在一條直線上，而且初始狀況下須要給slideImageList一個left值，由於最開始咱們想讓第四張照片展現，因此此時的left值爲-1800px，要記住這個值，由於咱們待會兒要經常使用到這個值。

　　5. @font-face 是引入 iconfont 相關的資源內容，不使用iconfont的可忽略。

 

　　接下來看javascript代碼：

var slideIndex = 3;   //記錄初始圖片的下標( 默認最初展現第四張圖片，下標從0開始，因此初始值爲3 )
//左邊按鈕的點擊事件
$("#slideLeftBtn").on("click",function(){
    // 點擊左按鈕的時候想要顯示當前圖片的前一張，因此slideIndex值要減去1
    slideIndex--;
    // animateLength表示想要讓slideImageLists移動到什麼位置，slideImageLists 的位置由 left屬性來控制
　　 var animateLength = slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
        // animate的回調函數(即執行完動畫以後纔會執行函數裏面的內容)
        if(slideIndex <= 0){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex = 3;
        }
    });
})
//右邊按鈕的點擊事件
$("#slideRightBtn").on("click",function(){
    // 點擊右按鈕的時候想要顯示當前圖片的後一張，因此slideIndex值要加上1
    slideIndex++;
    var animateLength = slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
　　　　　if(slideIndex >= 6){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex = 3;
        }
    })
})

 

　　如今着重來分析一下JavaScript的代碼，一樣有幾個關鍵點須要注意，其中部分我已在代碼中註釋：

　　1. 全局變量 slideIndex 指的是圖片的下標，一共有九張照片，下標從0開始，因此九張照片的下標值分別爲0-8，此處咱們默認展現第四張照片，因此slideIndex 的初始值置爲 3 。另外須要注意的是，slideIndex 是全局變量，因此函數內函數外均可以訪問到，而且只初始化一次。

　　2. 局部變量 animateLength 指的是想要 slideImageLists 運動到的位置，注意要加單位，而且須要賦值給 slideImageList 的 left 屬性。

　　3. jQuery的 animate 方法 ,詳情見下圖：

　　

 　　接下來完整的分析一下流程，以點擊左按鈕爲例：

　　1. 初始狀況下展現第四張圖片，下標爲 3 。 ( var slideIndex = 3 )

　　2. 給左按鈕綁定一個點擊事件

　　3. 點擊左按鈕的時候，想要展現當前照片的前一張，因此圖片下標須要減去1 ( slideIndex-- )

　　4. 計算 slideImageLists 要移動的位置 （ slideIndex * (-600) + "px" ），記得加單位。爲何要乘以 -600 ，首先 600 是一張照片的寬度，上面咱們分析過了若是要默認展現第四張照片的話 slideImageLists 的 left 屬性值爲 -1800px，同理，點擊左按鈕，想要展現第三張照片，那麼此時須要 slideImageLists 的 left 屬性值爲 -1200px，因此就是 ( 3 - 1 ) * ( -600 ) + "px" = -1200px 。

　　5. 利用 animate 來執行動畫。將上一步計算出來的值賦值給 slideImageLists 的 left 屬性。注意 animate方法自己就是含有過渡的，因此切記不須要在 slideImageLists 上面再加 transtion 屬性來實現過渡。

　　6. 實現循環輪播的重點來了。以上步驟實現了輪播，但沒有實現循環輪播，回憶咱們剛纔講的內容，一共有三組 1.jpg、2.jpg、3.jpg 的照片，默認展現第四張照片，也就是第二組照片中的 1.jpg ，若是點擊左按鈕，會分別展現第一組照片中的 3.jpg 、2.jpg、1.jpg , 假設一直點擊左按鈕，展現到第一張照片，也就是第一組的 1.jpg 的時候，此時圖片的下標 slideIndex 的值爲 0 。當此時展現的圖片的下標 slideIndex 的值爲 0 而且執行完這個動畫的時候，咱們須要作一個操做，將 slideImageLists 的 left 值瞬間改變爲 -1800px，這個值咱們上面強調過了，是初始狀況下展現第四張照片也就是第二組中的 1.jpg 的時候 slideImageLists 的 left 值，而且將當前展現的圖片的下標 slideIndex 的值變爲 3 。

　　animate有一個很是方便的地方在於他提供了一個回調函數，回調函數在動畫執行完以後本身執行。

　　另外，這裏還有一個須要格外注意的地方，咱們一直強調必定要瞬間將 slideImageLists 拉回到 left 值爲 -1800px 的地方，那是由於若是也相似於用animate來實現的話用戶會看到一個動畫的過程，這是咱們不能接受的。因此在瞬間拉回的時候我採用的是jQuery的css方法去改變 left 屬性。

 

　　不完美的地方

　　可是講到這裏，實際上仍是有不完美的地方，若是你屢次點擊按鈕，就會發生錯亂，此時咱們須要作的是在動畫的執行過程當中點擊按鈕無效，只有動畫結束完成才能夠繼續點擊實現動畫。我這裏採用的方案是引入一個布爾類型的變量 isClickable，初始值爲true，表示初始狀況下可點擊。當用戶點擊按鈕的時候會進行判斷當前 isClickable 的值，若是值爲true的時候纔會去執行 slideIndex-- 的操做，不然會 return false ,不會再執行下面的代碼。

　　此時咱們來分析一下流程：

　　1. 初始狀況下isClickable的值爲true，表示當前按鈕是能夠點擊的。

　　2. 此時咱們去點擊左按鈕，isClickable 的值爲 true , 會執行slideIndex-- 的操做。而且將 isClickable的值設置爲 false，表示如今已經處在動畫中。此時再去點擊左按鈕就沒法再執行slideIndex--的操做，而是進入 return false，終止當前代碼。

　　3. 須要注意的是，咱們須要在動畫執行完成後，也就是在回調函數中將 isClickable 的值變爲 true，因此當動畫結束後再點擊按鈕的時候就能夠進行下一次動畫了。

 

　　具體代碼以下：

var isClickable = true;   // 是否可點擊，默承認點擊
var slideIndex = 3;   
$("#slideLeftBtn").on("click",function(){
    if(isClickable == true){
        slideIndex--;
    }else{
        return false;
    }
    isClickable = false;
    var animateLength = slideIndex * (-600) + "px";
    $(".slideImageLists").animate({"left":animateLength},"slow",function(){
        isClickable = true;
        if(slideIndex <= 0){
            $(".slideImageLists").css({"left":"-1800px"});
            slideIndex = 3;
        }
    });
})