我愛擼碼，擼碼使我感到快樂
大家好，我是Counter
今天給大家分享的是利用jQuery來實現淘寶輪播圖，揭開這層神秘的面紗，CSS樣式就不做過多的贅述了，主要就是實現的原理，也就是jQuery，老樣子，每行基本都打上了我理解的注釋，表達的可能不是很好，但是理解理解就OK，歡迎一起技術探討，一起成長。
再講講輪播圖的需求吧，一打開網址，輪播圖就會自己每3秒切換到下一張，總共5張，一直輪播，當你鼠標進入圖片區域，那么圖片不再自動輪播，你可以點擊向左的按鈕，也可以點擊向右的按鈕，你點左圖片就切到上一張，點右就切到下一張，並且你可以點擊下面的小原點，點哪跑那張，並且鼠標離開，輪播圖又會自己每3秒跑起來，好了，廢話不多說，先上效果，可以試試哦，應該沒bug，嘿嘿。。。
效果如下：
ps：如果效果出不來，那么請刷新下頁面
代碼給出:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>淘寶輪播圖</title> <!-- CSS樣式 --> <style> body, ul, li { margin: 0; padding: 0; list-style: none; } .wrapper { width: 520px; margin: 50px auto 0; font-size: 0; } .box { position: relative; width: 520px; height: 280px; overflow: hidden; } .box .img-list { position: absolute; top: 0; left: 0; width: 3120px; height: 280px; } .box .img-list li { display: inline-block; width: 520px; height: 280px; } .box .img-list img { width: 520px; } .wrapper .box span { position: absolute; display: inline-block; top: 50%; margin-top: -25px; width: 30px; height: 50px; line-height: 47px; text-align: center; cursor: pointer; font-size: 18px; background-color: rgba(0, 0, 0, 0.5); color: #fff; z-index: 999; user-select: none; } .wrapper .box .left { left: 0; border-radius: 0 10px 10px 0; } .wrapper .box .right { right: 0; border-radius: 10px 0 0 10px; } .box .dot { position: absolute; bottom: 10px; width: 100%; text-align: center; } .dot .dot-list { display: inline-block; background-color: rgba(0, 0, 0, 0.5); border-radius: 10px; } .dot-list .item { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #fff; margin: 2px; cursor: pointer; } .dot-list .active { background-color: #ff6700; } </style> </head> <body> <div class="wrapper"> <div class="box"> <span class="left"><</span> <span class="right">></span> <ul class="img-list"> <li> <a href="javascript:;"> <img src="http://img1.imgtn.bdimg.com/it/u=3094246468,617437449&fm=26&gp=0.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://ftp.nowamagic.net/librarys/images/92.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://img.mp.itc.cn/upload/20170706/88c62ffcfe8748a78e6b2d66c77ebbef_th.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://pic.58pic.com/58pic/16/17/72/24858PIC3hD_1024.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554278929&di=31b49ed3ef2bde4304c49a8632c79456&imgtype=jpg&er=1&src=http%3A%2F%2Fimages.ali213.net%2Fpicfile%2Fpic%2F2013%2F12%2F15%2F584_20131215140559601.png" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="http://img1.imgtn.bdimg.com/it/u=3094246468,617437449&fm=26&gp=0.jpg" alt=""> </a> </li> </ul> <div class="dot"> <ul class="dot-list"> <li class="item active"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> </div> </div> </div> <!-- jQuery已在線移入,這邊注釋 --> <!-- <script src="../jquery-3.3.1.js"></script> --> <!-- jQuery --> <script> // 設置比較索引的最小值0，5 var minNum = 0; var maxNum = 5; // 剛開始索引為0 var index = 0; // 設置一個計時器為空 var counter = null; // 設置最小移動距離520，因為這邊每張圖片都為寬度520px，高度280px var limWidth = 520; // 設置自動輪播函數 function autoMove() { // 如果計時器不為空的話那么跳出，計時器不為空，說明當前有計時器在跑，那么你就老老實實的跑當前的計時器，別給搞事 if (counter != null) { return; } // 如果計時器為空的話，那么開啟一個每3秒執行一次autoPlay的函數 counter = setInterval(autoPlay, 3000); } // 自動輪播函數，其實很簡單，向函數cliMove傳遞參數right，就好比，一個人每3秒點擊一次右邊的小按鈕，不過這變有電腦去執行 function autoPlay() { cliMove('right'); } // 執行函數，傳遞形參，代表方向 function cliMove(direction) { // 因為在這邊有涉及到整個ul寬度的變化的動畫，stop()函數有兩個參數，涉及到jQuery動畫，第一個參數意思是，是否還要保留動畫隊列，false不保留，true保留。第二個參數意思是，是否立即執行完當前的動畫，true是，false不是，那這邊選擇true的原因是我需要你立即響應當前用戶的操作，防止用戶快速點擊左右按鈕，移開鼠標，而動畫卻還在移動。這邊第一個參數填false或者true，已經影響不了什么了，因為當前動畫立即執行，動畫隊列肯定是沒有了，所有第一個參數填false或者true，已經不打緊了 $('.img-list').stop( false, true ); // 如果用戶點擊的是右邊的按鈕 if ( direction == "right" ) { // 那么索引值加1，沒點擊一次在原有基礎上加一次 index++; // 如果索引值大於5了 if ( index > 5) { // 意味着用戶瀏覽到第六張了，而這邊第六張正是第一張，為了實現無縫連接，所以這樣處理，看着只有5張，實際上頭尾兩張是一樣的，所以有六張 // 那么將ul的left設置為0，又回到了第一張，注意這邊是迅速移動到第一張，因為用了css屬性，而不是animate移動動畫 $('.img-list').css({ left: 0 }) // 同時將索引值設置為1，注意這邊的1為第二張，在大多數編程語言中，數組都是從0開始，JS也是一樣的 index = 1; } } // 如果傳遞用戶點擊的是左邊的按鈕 else if ( direction == "left") { // 那么索引值減1 index--; // 如果索引值小於0的話，運用的原理跟上面雷同，意味着迅速移到第六張 if ( index < 0 ) { $('.img-list').css({ left: maxNum * -limWidth }) // 同時索引值變為4，意味着變為第五張 index = 4; } } // 每次index變換時小原點的背景也跟着變換,與圖片一一對應,但是圖片一共是6張,小原點就5個,所有這邊進行判斷,如果index大於4的話就返回0即代表着第一個小原點,否則的話圖片就隨着index變化而變化 dotMove($('.item').eq(index > 4 ? 0 : index)); // 不關點擊的是左邊的還是右邊的，最后結果都是要執行這句話的，這步是動畫移動的關鍵， // ul的left值設為當前索引與每張圖片最小寬度的乘積，這邊的負值是意味着，這個ul定位相對於父級left的負值 $('.img-list').animate({ left: index * -limWidth }); } // 綁定ul父級的鼠標進入，離開事件，jQuery鏈式調用，如果鼠標進入，那么清空當前自動輪播的計時器，如果鼠標離開，那么重新執行自動輪播的函數 $('.box').mouseenter(function () { clearInterval(counter); counter = null; }).mouseleave(function () { autoMove(); }) //綁定點擊事件，如果點擊了右邊按鈕，那么觸發函數cliMove，這個函數在上面已經詳細注釋了，並傳入right，圖片就會跟你按的次數，進行移動播放 $('.right').click(function () { cliMove('right'); }) $('.left').click(function () { cliMove('left'); }) // 綁定下面小原點事件，如果點擊了其中任意一個小原點，那么獲取到當前點擊的小原點的索引，並且賦值給index，並且執行函數cliMove，不傳入參數，因為此時，希望圖片與小原點一一對應 $('.item').click(function () { index = $(this).index(); cliMove(''); }) // 點擊小原點后將會觸發cliMove函數，並且在這個函數中，執行了dotMove，移除當前小原點的CSS樣式，向dotMove函數傳入當前點擊的小原點所在的位置，並且設置其CSS樣式，即點擊的小原點背景變為橘黃色 function dotMove(dom) { $('.active').removeClass('active'); dom.addClass('active'); } // 當頁面刷新，先執行一邊自動輪播的函數，這個時候圖片就會自己輪播起來了 autoMove(); </script> </body> </html>
是不是感覺用jQuery實現比原生JS方便太多了，便捷太多了，沒錯就是這樣滴。