前言
作為一個前端工程師，無論公司是什么行業，無論你做什么端，基本都會遇到一個避不開的動畫效果：循環輪播。做輪播並不難，市場上的輪播插件有很多，其中比較著名的是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"></div> <div class="slideRightBtn" id="slideRightBtn"></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; } }); })
以上就是左按鈕點擊時候的思路，點擊右按鈕的思路和點擊左按鈕的思路是一樣的，相信聰明的你一定能夠一點即通，有問題歡迎大家和我交流。
祝工作順利 ~