前言
作為一個前端工程師，無論公司是什麼行業，無論你做什麼端，基本都會遇到一個避不開的動畫效果：迴圈輪播。做輪播並不難，市場上的輪播外掛有很多，其中比較著名的是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程式碼：
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； } }）；}）
xxxxxxxxxxbr var isClickable = true； // 是否可點選，預設可點選brvar slideIndex = 3； br$（“#slideLeftBtn”）。on（“click”，function（）{br if（isClickable == true）{br slideIndex——；br }else{br return false；br }br isClickable = false；br var animateLength = slideIndex * （-600） + “px”；br $（“。slideImageLists”）。animate（{“left”：animateLength}，“slow”，function（）{br isClickable = true；br if（slideIndex <= 0）{br $（“。slideImageLists”）。css（{“left”：“-1800px”}）；br slideIndex = 3；br }br }）；br}）
以上就是左按鈕點選時候的思路，點選右按鈕的思路和點選左按鈕的思路是一樣的，相信聰明的你一定能夠一點即通，有問題歡迎大家和我交流。
祝工作順利 ~
