手把手教你用jQuery实现手动自动轮播
輪播原理簡述
1. 點(diǎn)擊按鈕切換圖片
HTML
<!DOCTYPE html> <html><head> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8" /> <title>JS Bin</title> </head> <body> <div class="window"> <div class="images" id="images"> <img src="https://tympanus.net/Freebies/Cardio/img/team/team-cover2.jpg" alt="" /> <img src="https://tympanus.net/Freebies/Cardio/img/team/team-cover1.jpg" alt="" /> <img src="https://tympanus.net/Freebies/Cardio/img/team/team-cover3.jpg" alt="" /> </div> </div> <button id="p1">1</button> <button id="p2">2</button> <button id="p3">3</button> </body> </html> 復(fù)制代碼CSS
.images {display: flex;align-items: flex-start;transition: transform 0.5s;/* 圖片切換在 0.5s 內(nèi)完成，以免切換速度過快或者過慢，用戶不適 */ }.window {width: 370px; /* 以上三張圖片的寬為：370px */overflow: hidden; } 復(fù)制代碼JavaScript （transform 實(shí)現(xiàn)）
var p1 = document.getElementById('p1'); var p2 = document.getElementById('p2'); var p3 = document.getElementById('p3'); var images = document.getElementById('images');$(p1).on('click', function() {$(images).css({transform: 'translateX(0)'// 水平方向移動 0 px ，此時(shí)正顯示的是第一張圖}) })$(p2).on('click', function() {$(images).css({transform: 'translateX(-370px)'// 水平方向移動 -370 px ，一張圖的寬度}) })$(p3).on('click', function() {$(images).css({transform: 'translateX(-740px)'// 水平方向移動 --740 px，前兩張圖的寬度}) }) 復(fù)制代碼獲取 3 個(gè) button 的 id ，為 3 個(gè) button 添加點(diǎn)擊事件，點(diǎn)擊后，給 id 為 images 的 div 添加 CSS 樣式 transform ，達(dá)到切換圖片、實(shí)現(xiàn)輪播的效果。
JavaScript （margin-left 實(shí)現(xiàn)）
var p1 = document.getElementById('p1'); var p2 = document.getElementById('p2'); var p3 = document.getElementById('p3'); var images = document.getElementById('images');$(p1).on('click', function() {$(images).css({'margin-left': 0}) })$(p2).on('click', function() {$(images).css({'margin-left': '-370px'}) })$(p3).on('click', function() {$(images).css({'margin-left': '-740px'}) }) 復(fù)制代碼注意 ：margin-left 有 - 要用 ' ' 進(jìn)行包裹。
代碼優(yōu)化 —— 無限張圖輪播怎么辦？
假如現(xiàn)在有 100 張圖要輪播，難道要 var p1 = document.getElementById('p1'); 一百次？ 添加 $(p1).on('click', function(){}) 一百次？顯然上面的代碼只顧著實(shí)現(xiàn)了功能，沒有考慮代碼的可維護(hù)性和拓展性。
修改 HTML 代碼，把 button 放到一個(gè)小組里。只需要給“小組長” id 即可， 不需要給 button 組員每人一個(gè) id 。
<span id="buttons"><button>1</button><button>2</button><button>3</button> </span> 復(fù)制代碼修改 JavaScript 代碼，獲取所有 button 并添加點(diǎn)擊事件，ev.currentTarget 指向添加監(jiān)聽事件的對象，.index( ) 獲取點(diǎn)擊 button 的索引，移動的距離 npx 為索引 * 圖片寬度。
var allButtons = $('#buttons > button'); for(let i = 0;i < allButtons.length;i++){$(allButtons[i]).on('click',function(ev){var index = $(ev.currentTarget).index(); var npx = index * -370;$('#images').css({transform:'translateX(' + npx + 'px)'});}); } 復(fù)制代碼現(xiàn)在無論實(shí)現(xiàn)多少張圖的輪播，只需要以上幾行代碼輕松實(shí)現(xiàn)。
2. 自動輪播
自動輪播，就是讓瀏覽器幫我們以相同時(shí)間間隔按順序點(diǎn)擊切換圖片按鈕。
為了使 gif 圖錄制出來的效果明顯，我給選中的按鈕加了黑色背景色。
CSS
.red{background: #000;color:red;} 復(fù)制代碼JavaScript
var allButtons = $('#buttons > button'); for(let i = 0;i<allButtons.length;i++){$(allButtons[i]).on('click',function(ev){var index = $(ev.currentTarget).index();var npx = index*-370;$('#images').css({transform:'translateX('+ npx +'px)'});}); }var n = 0; var size = allButtons.length; setInterval(()=> {n++;allButtons.eq(n%size).trigger('click').addClass('red').siblings('.red').removeClass('red'); },3000); 復(fù)制代碼思路：
利用 n 做計(jì)數(shù)器，找到要切換的第 n 個(gè) button ，s 秒后觸發(fā)第 n 個(gè) button 的點(diǎn)擊事件（切換圖片完成），給所有的 button 加上 red 的屬性，給當(dāng)前 button 的兄弟元素移除 red 屬性（對應(yīng)圖片的 button 變成紅色）。
說明：
思考1：鼠標(biāo)懸停怎么做？
解決方案：用 mouseenter 和 mouseleave
當(dāng)鼠標(biāo)進(jìn)入圖片的時(shí)候，把計(jì)時(shí)器清除，當(dāng)鼠標(biāo)移除的時(shí)候，計(jì)時(shí)器繼續(xù)。
思考2：點(diǎn)擊第 n 個(gè)圖片的 button ，從第 n 張圖片開始輪播怎么辦？
var allButtons = $('#buttons > button'); for(let i = 0;i<allButtons.length;i++){$(allButtons[i]).on('click',function(ev){var index = $(ev.currentTarget).index();var npx = index*-370;$('#images').css({transform:'translateX('+ npx +'px)'});n = index;allButtons.eq(n).addClass('red').siblings('.red').removeClass('red');}); } 復(fù)制代碼記錄被點(diǎn)擊的是哪個(gè) button，將 button 的 index 賦值給 n，遍歷尋找到后添加 red 屬性，并移除該元素兄弟的 red 屬性。
代碼優(yōu)化
封裝函數(shù)
function activeButton($button){$button.addClass('red').siblings('.red').removeClass('red');} 復(fù)制代碼function playSlide(index){allButtons.eq(index).trigger('click'); } 復(fù)制代碼function setTimer(){return setInterval(()=> {n++;playSlide(n%size); },2000) } 復(fù)制代碼完整代碼
var allButtons = $('#buttons > button');for(let i = 0;i<allButtons.length;i++){$(allButtons[i]).on('click',function(ev){var index = $(ev.currentTarget).index();var npx = index*-370;$('#images').css({transform:'translateX('+ npx +'px)'});n = index;activeButton(allButtons.eq(n))}); }var n = 0; var size = allButtons.length; var timerId = setTimer();$('.window').on('mouseenter',function(){window.clearInterval(timerId); })$('.window').on('mouseleave',function(){timerId = setTimer(); })function setTimer(){return setInterval(()=> {n++;playSlide(n%size); },2000) }function playSlide(index){allButtons.eq(index).trigger('click'); }function activeButton($button){$button.addClass('red').siblings('.red').removeClass('red');} 復(fù)制代碼小結(jié)
快動手寫個(gè)輪播吧~
總結(jié)
以上是生活随笔為你收集整理的手把手教你用jQuery实现手动自动轮播的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： yii2 / 在这里有个叫BaseDat
- 下一篇： Linux驱动之混杂设备（misc）