手把手教你用jQuery實現手動&自動輪播

時間 2019-11-17

標籤手把手 jquery 實現手動動輪欄目 JQuery 简体版

原文原文鏈接

輪播原理簡述

假設有三張圖，一字排開，用一個div包起來。
再來一個 div ，寬高和每幅圖寬高同樣，加overflow ：hidden，超過此 div 寬高的圖，都看不見。例以下圖只能看見 2 ，而看不到 1 和 3 。
經過 margin-left 或者 transform 等屬性來更改展現的圖片，切換看到圖 1 或者圖 3。

1. 點擊按鈕切換圖片

HTMLcss

<!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>
複製代碼

CSShtml

.images {
	display: flex;
	align-items: flex-start;
	transition: transform 0.5s;
	/* 圖片切換在 0.5s 內完成，以避免切換速度過快或者過慢，用戶不適 */
}

.window {
	width: 370px; /* 以上三張圖片的寬爲：370px */
	overflow: hidden;
}
複製代碼

JavaScript （transform 實現）jquery

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 ，此時正顯示的是第一張圖
    })
})

$(p2).on('click', function() {
    $(images).css({
        transform: 'translateX(-370px)'
        // 水平方向移動 -370 px ，一張圖的寬度
    })
})

$(p3).on('click', function() {
    $(images).css({
        transform: 'translateX(-740px)'
        // 水平方向移動 --740 px，前兩張圖的寬度
    })
})
複製代碼

獲取 3 個 button 的 id ，爲 3 個 button 添加點擊事件，點擊後，給 id 爲 images 的 div 添加 CSS 樣式 transform ，達到切換圖片、實現輪播的效果。api

JavaScript （margin-left 實現）瀏覽器

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'
    })
})
複製代碼

注意：margin-left 有 - 要用 ' ' 進行包裹。bash

代碼優化 —— 無限張圖輪播怎麼辦？

假如如今有 100 張圖要輪播，難道要 var p1 = document.getElementById('p1'); 一百次？添加 $(p1).on('click', function(){}) 一百次？顯然上面的代碼只顧着實現了功能，沒有考慮代碼的可維護性和拓展性。ide

修改 HTML 代碼，把 button 放到一個小組裏。只須要給「小組長」 id 便可，不須要給 button 組員每人一個 id 。函數

<span id="buttons">
    <button>1</button>
    <button>2</button>
    <button>3</button>
</span>
複製代碼

修改 JavaScript 代碼，獲取全部 button 並添加點擊事件，ev.currentTarget 指向添加監聽事件的對象，.index( ) 獲取點擊 button 的索引，移動的距離 npx 爲索引 * 圖片寬度。flex

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)'
    });
  });
}
複製代碼

如今不管實現多少張圖的輪播，只須要以上幾行代碼輕鬆實現。優化

2. 自動輪播

自動輪播，就是讓瀏覽器幫咱們以相同時間間隔按順序點擊切換圖片按鈕。
爲了使 gif 圖錄製出來的效果明顯，我給選中的按鈕加了黑色背景色。

CSS

.red{
      background: #000;
      color:red;
    }
複製代碼

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);
複製代碼

思路：

利用 n 作計數器，找到要切換的第 n 個 button ，s 秒後觸發第 n 個 button 的點擊事件（切換圖片完成），給全部的 button 加上 red 的屬性，給當前 button 的兄弟元素移除 red 屬性（對應圖片的 button 變成紅色）。

說明：

setInterval() 方法重複調用一個函數或執行一個代碼段，在每次調用之間具備固定的時間延遲。
.eq() 方法是 jQuery 中的一種遍歷方法，這裏用來找出第 n % size 張圖。
.trigger() 觸發器能夠出發各類事件，好比：click，submit。

思考1：鼠標懸停怎麼作？

解決方案：用 mouseenter 和 mouseleave

當鼠標進入圖片的時候，把計時器清除，當鼠標移除的時候，計時器繼續。

給 setInterval 一個名字，叫 timerId。

var timerId = setInterval(()=> {
  n++;
  allButtons.eq(n%size)
            .trigger('click')
            .addClass('red')
            .siblings('.red')
            .removeClass('red');
},2000);
複製代碼

鼠標進入圖片，清除計時器

$('.window').on('mouseenter',function(){
  window.clearInterval(timerId);
})
複製代碼

鼠標移出，恢復計時。

$('.window').on('mouseleave',function(){
  timerId = setInterval(()=> {
  n++;
  allButtons.eq(n%size)
            .trigger('click')
            .addClass('red')
            .siblings('.red')
            .removeClass('red');
},2000)
})
複製代碼

思考2：點擊第 n 個圖片的 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');
  });
}
複製代碼

記錄被點擊的是哪一個 button，將 button 的 index 賦值給 n，遍歷尋找到後添加 red 屬性，並移除該元素兄弟的 red 屬性。

代碼優化

封裝函數

function activeButton($button){
  $button.addClass('red')
         .siblings('.red')
         .removeClass('red');
         
}
複製代碼

function playSlide(index){
  allButtons.eq(index).trigger('click');
}
複製代碼

function setTimer(){
  return setInterval(()=> {
  n++;
  playSlide(n%size);
},2000)
}
複製代碼

完整代碼

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');
         
}
複製代碼