代碼鏈接：我的GitHub

項目預覽：預覽

目的：通過CSS + jQuery的方式實現自動輪播。

1.用CSS3來實現輪播

思路：通過給每一個按鈕添加點擊事件，點擊之後改變圖片的位置，從而實現輪播。

• HTML結構

<div class="window">
    <div class="images" id="images">
        <img src="/img/function-01.jpg" width=960  srcset="">
        <img src="/img/git-01.jpg" width=960  srcset="">
        <img src="/img/JQUERY-01.jpg" width=960  srcset="">
    </div>
</div>
<div class="bnCtrl">
    <button id="p1">第1張</button>
    <button id="p2">第2張</button>
    <button id="p3">第3張</button>
</div>
 

/* 把圖片放在同一欄並且左對齊 */
.images {
    display: flex;
    /* flex-start（默認值）：左對齊 */
    align-items: flex-start;
    transition: transform 0.5s;
}
.images img{
    vertical-align: top;
}
/* 設置顯示窗口大小 */
.window {
    width: 960px;
    overflow: hidden;
    border: 1px solid red;
    margin: 30px auto;
}
.bnCtrl {
    text-align: center;
}
 

$(p1).on(‘click‘,function(){
    $(images).css({
        // 如果有bug也可以換成 ‘margin-left‘: 0
        transform: ‘translateX(0)‘
    })
})
$(p2).on(‘click‘,function(){
    $(images).css({
        // ‘margin-left‘: ‘-960px‘
        transform: ‘translateX(-960px)‘
    })
})
$(p3).on(‘click‘,function(){
    $(images).css({
        // ‘margin-left‘: ‘-1920px‘
        transform: ‘translateX(-1920px)‘
    })
})
 

實現要點：

• HTML中主要存在兩個div，一個div加載圖片，利用flex的特性讓圖片在同一行並且向左對齊，每一張圖片(或者通過設置width)使寬度相同；另一個div通過設置width和overflow: hidden控制顯示圖片的視窗尺寸。
• 對於jQuery選擇器和事件的使用。

缺點：

• 需要綁定給不同的按鈕逐個事件，步驟重復繁雜。

• 圖片數量不可控。

2.使用jQuery給按鈕自動添加事件

思路：通過jQuery選擇器選擇所有按鈕，遍歷每個按鈕，添加點擊事件；根據每個按鈕在父元素中的下標，計算出每次輪播需要移動的距離，點擊執行。

<div class="window2">
    <div class="images" id="images2">
        <img src="/img/function-01.jpg" width=960  srcset="">
        <img src="/img/git-01.jpg" width=960  srcset="">
        <img src="/img/JQUERY-01.jpg" width=960  srcset="">
        <img src="/img/命令行-01-01.jpg"  width=960  srcset="">
    </div>
</div>
<div class="bnCtrl2" id="bnCtrl2">
    <button >第1張</button>
    <button >第2張</button>
    <button >第3張</button>
    <button >第4張</button>
</div>

/* 把圖片放在同一欄並且左對齊 */
.images2 {
    display: flex;
    /* flex-start（默認值）：左對齊 */
    align-items: flex-start;
    transition: transform 0.5s;
}
.images2 img{
    vertical-align: top;
}
/* 設置顯示窗口大小 */
.window2 {
    width: 960px;
    overflow: hidden;
    border: 1px solid red;
    margin: 30px auto;
}
.bnCtrl2 {
    text-align: center;
.red{
    color:red;
}
}

// 獲取所有輪播圖片的按鈕
var allButtons = $(‘#bnCtrl2  button‘)

// 遍歷按鈕，添加點擊事件
for(let i = 0;i<allButtons.length;i++){
   
   // 把每個按鈕轉成jQuery對象，使用jQuery方法
    $(allButtons[i]).on(‘click‘,function(x){
        
        // 利用jQuery中的index()獲取每個按鈕相對於父元素的下標位置
        var index = $(x.currentTarget).index()
        
        // 根據下標位置計算需要移動的距離
        var p = index * -960
        
        $(‘#images2‘).css({
            transform: ‘translateX(‘+ p +‘px)‘
        })
    })
}

實現要點：

• jQuery選擇器
• $(allButtons[i])把每個DOM對象轉換成了jQuery對象，使用jQuery方法
• 利用jQuery中的index()屬性獲取每個按鈕相對於父元素的下標位置

3.添加自動輪播功能

思路：使用setInterval()添加自動輪播功能。

var allButtons = $(‘#bnCtrl2  button‘)

// 遍歷按鈕，添加點擊事件
for(let i = 0;i<allButtons.length;i++){
    
    // 把每個按鈕轉成jQuery對象，使用jQuery方法
    $(allButtons[i]).on(‘click‘,function(x){
        
        // 獲取每個按鈕相對於父元素的下標位置
        var index = $(x.currentTarget).index()
        
        // 根據下標位置計算需要移動的距離
        var p = index * -960
        $(‘#images2‘).css({
            transform: ‘translateX(‘+ p +‘px)‘
        })
        n = index
        
        //給當前輪播元素添加樣式
        activeButton(allButtons.eq(n)) 
    })
}
//n 和 size是通過求余數來確定輪播的是哪一張圖片(哪一個按鈕)
var n = 0
var size = allButtons.length
//eq()會找出對應的DOM且把對應的DOM封裝成jQuery對象
// trigger手動觸發事件
allButtons.eq(n%size).trigger(‘click‘)

var timeId = setTimer()

// 當鼠標移入，移除自動輪播功能
$(‘.window2‘).on(‘mouseenter‘,function(){
    window.clearInterval(timeId)
})

// 當鼠標移出，恢復自動輪播功能
$(‘.window2‘).on(‘mouseleave‘,function(){
    timerId = setTimer()
})

//當輪播時，當前按鈕添加樣式；其他按鈕移除樣式
function activeButton($button){
    $button
        .addClass(‘red‘)
        //這裏註意的是：siblings接受的是選擇器，而removeClass接受的是類名
        .siblings(‘.red‘).removeClass(‘red‘)
}


function setTimer() {
    return setInterval(() => {
        n += 1
        allButtons.eq(n % size).trigger(‘click‘)
    }, 2000)
}

實現要點：

• setInterval()的使用
• 通過eq()的方法把給DOM對象封裝成jQuery對象
• 通過trigger()手動觸發事件(相當於模擬觸發)
• 通過對按鈕數量的length進行求余得出當前輪播按鈕的jQuery對象
• 鼠標事件(onmouseenter/onmouseleave)的運用

註意：

• jQuery中sibling()接受的是選擇器，所以要用‘.red‘；而removeClass接受的是類名，所以用‘red‘

[JavaScript]使用CSS + jQuery 實現自動輪播圖