本文的主要内容是使用jQuery实现轮播的思路及过程
1. 准备工作
首先准备好五张（随便几张只要不是一张就行）尺寸合适的图片，在html中用一个div表示视窗，其内用一个div放置准备好的图片。
<div class="viewport">
<div class="images">
<img src="https://i2.wp.com/waggintailacademy.com/wp-content/uploads/2016/10/Natural-Dog-Law-5-Dogs-are-social-pack-animals.jpg?fit=845%2C450" alt="" class="img1" width=400px>
<img src="https://bullyfambamblog.files.wordpress.com/2017/03/top-rated-treats-featured-image.jpg?w=845&h=450&crop=1" alt="" class="img2" width=400px>
<img src="https://pressraffles.files.wordpress.com/2017/02/picture11.png?w=845&h=450&crop=1" alt="" class="img3" width=400px>
<img src="https://i0.wp.com/kcpetcollective.com/wp-content/uploads/2017/08/wesley_onelight_couch.png?resize=845%2C450&ssl=1" alt="" class="img4" width=400px>
<img src="https://i0.wp.com/petperfectiontoowoomba.com/wp-content/uploads/2017/10/A-place-of-their-own-What-to-look-for-in-dog-beds-1.jpg?fit=845%2C450" alt="" class="img5" width=400px>
</div>
</div>
<button id="button1">第1张</button>
<button id="button2">第2张</button>
<button id="button3">第3张</button>
<button id="button4">第4张</button>
<button id="button5">第5张</button>
这里为每张图片设置了合适的宽度，并且添加五个button方便选取。
然后为图片添加CSS：
.viewport {
width: 400px;
overflow: hidden;
}
.images {
display: flex;
align-items: flex-start;
}
添加完样式的效果如下图：
image
2. 添加JS
首先用简单的方式实现图片的切换效果：
$(button1).on('click', function(){
$('.images').css({
'margin-left': '0'
})
})
$(button2).on('click', function(){
$('.images').css({
'margin-left': '-400px'
})
})
$(button3).on('click', function(){
$('.images').css({
'margin-left': '-800px'
})
})
$(button4).on('click', function(){
$('.images').css({
'margin-left': '-1200px'
})
})
$(button5).on('click', function(){
$('.images').css({
'margin-left': '-1600px'
})
})
这里通过JS在点击相应button的时候对 .image 的 margin-left 属性进行修改，实现图片的切换效果。
3. 改进实现方式
上文中的实现方式虽然是最容易想到的方式，同时也可以完成点击按钮切换图片的功能，但是这种实现方式有很多不足之处，首先如果轮播的图片很多就需要写出很多的重复代码，其次这种简单的方法并不能实现无限轮播，因此我们采用另一种方式实现基本功能。
<div class="buttons">
<button id="button1">第1张</button>
<button id="button2">第2张</button>
<button id="button3">第3张</button>
<button id="button4">第4张</button>
<button id="button5">第5张</button>
</div>
在html中用div将全部button包裹起来
let allButtons = $('.buttons > button')
for(let i = 0; i < allButtons.length; i++){
$(allButtons[i]).on('click', function(e){
let index = $(e.currentTarget).index()
let distance = index * -400
$('.images').css({
'margin-left': distance + 'px'
})
})
}
在JS中通过jQuery选中元素并通过 .index() 确定被点击的button的下标，通过下标就可以确认images所需要移动的距离。
4. 实现自动播放
第三步中已经改进了切换图片的实现方式，不用担心轮播图片的数量，接下来实现自动播放功能。
let n = 0
setInterval(()=>{
n += 1
allButtons.eq(n%5).trigger('click')
}, 1500)
使用 setInterval 定时器，通过 .eq(n%5) 选中图片（分别为0,1,2,3,4,0,1,2，...），每隔1.5秒使用 trigger('click') 模拟click事件，由此来实现自动播放功能。
5. 优化自动播放
接上一步，虽然已经实现了自动播放的基本功能，但是仍有许多优化的空间。
let n = 0
let count = $('.images > img').length
allButtons.eq(n%count).trigger('click').addClass('active').siblings('.active').removeClass('active')
setInterval(()=>{
n += 1
allButtons.eq(n%count).trigger('click').addClass('active').siblings('.active').removeClass('active')
}, 1500)
声明一个count变量获取图片的数量，然后为当前展示的图片相应的button添加 active 样式并清除其他button的样式。
6. 实现暂停、播放功能
通常对于一个轮播来说，光标悬浮在图片上停止播放，光标离开图片继续播放是基本功能，因此此部分实现轮播的暂停、播放功能。
$('.viewport').on('mouseenter', function(){
window.clearInterval(clockId)
})
$('.viewport').on('mouseleave', function(){
clockId = setInterval(()=>{
n += 1
allButtons.eq(n%count).trigger('click').addClass('active').siblings('.active').removeClass('active')
}, 1500)
})
如此一来，一个简单的轮播就完成了。
7. 代码优化
上述的代码还有很多可以优化的空间，有很多重复的代码可以使用函数来封装。
let allButtons = $('.buttons > button')
for(let i = 0; i < allButtons.length; i++){
$(allButtons[i]).on('click', function(e){
let index = $(e.currentTarget).index()
let distance = index * -400
$('.images').css({
'margin-left': distance + 'px'
})
n = index
activeButton(allButtons.eq(n))
})
}
let n = 0
let count = $('.images > img').length
slideImg(n%count)
let clockId = setClock()
function setClock(){
return setInterval(()=>{
n += 1
slideImg(n%count)
}, 1500)
}
function slideImg(index){
allButtons.eq(index).trigger('click')
}
function activeButton($button){
$button.addClass('active').siblings('.active').removeClass('active')
}
$('.viewport').on('mouseenter', function(){
window.clearInterval(clockId)
})
$('.viewport').on('mouseleave', function(){
clockId = setClock()
})
上面的代码已经进行了一部分优化，封装出 setClock() 函数、 slideImg() 函数和 activeButton 函数，避免了代码的重复。
8. 总结
本文使用jQuery实现轮播的思路如下：
- 首先找到对应的按钮，监听按钮的click事件，并添加相应的样式
- 设置一个定时器，使得图片循环滚动
- 使用trigger()模拟click事件
- 监听视窗的mouseenter事件，清除定时器，实现光标悬浮暂停播放功能
- 监听视窗的mouseleave事件，添加定时器，实现光标离开继续播放播放功能
