本文的主要內(nèi)容是使用jQuery實現(xiàn)輪播的思路及過程
1. 準備工作
首先準備好五張（隨便幾張只要不是一張就行）尺寸合適的圖片，在html中用一個div表示視窗荧呐，其內(nèi)用一個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;
}
添加完樣式的效果如下圖：
2. 添加JS
首先用簡單的方式實現(xiàn)圖片的切換效果：
$(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的時候?qū)?.image 的 margin-left 屬性進行修改顿膨，實現(xiàn)圖片的切換效果锅锨。
3. 改進實現(xiàn)方式
上文中的實現(xiàn)方式雖然是最容易想到的方式，同時也可以完成點擊按鈕切換圖片的功能恋沃，但是這種實現(xiàn)方式有很多不足之處必搞，首先如果輪播的圖片很多就需要寫出很多的重復代碼，其次這種簡單的方法并不能實現(xiàn)無限輪播囊咏，因此我們采用另一種方式實現(xiàn)基本功能恕洲。
<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. 實現(xiàn)自動播放
第三步中已經(jīng)改進了切換圖片的實現(xiàn)方式霜第，不用擔心輪播圖片的數(shù)量，接下來實現(xiàn)自動播放功能户辞。
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事件末誓，由此來實現(xiàn)自動播放功能扯俱。
5. 優(yōu)化自動播放
接上一步，雖然已經(jīng)實現(xiàn)了自動播放的基本功能喇澡，但是仍有許多優(yōu)化的空間迅栅。
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變量獲取圖片的數(shù)量，然后為當前展示的圖片相應的button添加 active 樣式并清除其他button的樣式晴玖。
6. 實現(xiàn)暫停读存、播放功能
通常對于一個輪播來說，光標懸浮在圖片上停止播放呕屎，光標離開圖片繼續(xù)播放是基本功能让簿，因此此部分實現(xiàn)輪播的暫停、播放功能秀睛。
$('.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. 代碼優(yōu)化
上述的代碼還有很多可以優(yōu)化的空間蹂安，有很多重復的代碼可以使用函數(shù)來封裝椭迎。
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()
})
上面的代碼已經(jīng)進行了一部分優(yōu)化，封裝出 setClock() 函數(shù)田盈、 slideImg() 函數(shù)和 activeButton 函數(shù)畜号，避免了代碼的重復。
8. 總結(jié)
本文使用jQuery實現(xiàn)輪播的思路如下：
- 首先找到對應的按鈕允瞧，監(jiān)聽按鈕的click事件简软，并添加相應的樣式
- 設置一個定時器，使得圖片循環(huán)滾動
- 使用trigger()模擬click事件
- 監(jiān)聽視窗的mouseenter事件述暂，清除定時器痹升，實現(xiàn)光標懸浮暫停播放功能
- 監(jiān)聽視窗的mouseleave事件，添加定時器贸典，實現(xiàn)光標離開繼續(xù)播放播放功能
