[JavaScript]使用CSS + jQuery 实现自动轮播图

代码链接：我的GitHub

项目预览：预览

目的：通过CSS + jQuery的方式实现自动轮播。

1.用CSS3来实现轮播

思路：通过给每一个按钮添加点击事件，点击之后改变图片的位置，从而实现轮播。

• HTML结构

<div class="window">
    <div class="images" id="images">
        <img src="/img/function-01.jpg" width=960 alt="" srcset="">
        <img src="/img/git-01.jpg" width=960 alt="" srcset="">
        <img src="/img/JQUERY-01.jpg" width=960 alt="" 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 alt="" srcset="">
        <img src="/img/git-01.jpg" width=960 alt="" srcset="">
        <img src="/img/JQUERY-01.jpg" width=960 alt="" srcset="">
        <img src="/img/命令行-01-01.jpg"  width=960 alt="" 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'