本文的主要內(nèi)容是使用jQuery實(shí)現(xiàn)輪播的思路及過程

1. 準(zhǔn)備工作

首先準(zhǔn)備好五張（隨便幾張只要不是一張就行）尺寸合適的圖片，在html中用一個(gè)div表示視窗，其內(nèi)用一個(gè)div放置準(zhǔn)備好的圖片。

<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>

這里為每張圖片設(shè)置了合適的寬度，并且添加五個(gè)button方便選取。
然后為圖片添加CSS：

.viewport {
  width: 400px;
  overflow: hidden;
}
.images {
  display: flex;
  align-items: flex-start;
}

添加完樣式的效果如下圖：

image

2. 添加JS

首先用簡(jiǎn)單的方式實(shí)現(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在點(diǎn)擊相應(yīng)button的時(shí)候?qū)?.image 的 margin-left 屬性進(jìn)行修改，實(shí)現(xiàn)圖片的切換效果。

3. 改進(jìn)實(shí)現(xiàn)方式

上文中的實(shí)現(xiàn)方式雖然是最容易想到的方式，同時(shí)也可以完成點(diǎn)擊按鈕切換圖片的功能，但是這種實(shí)現(xiàn)方式有很多不足之處，首先如果輪播的圖片很多就需要寫出很多的重復(fù)代碼，其次這種簡(jiǎn)單的方法并不能實(shí)現(xiàn)無限輪播，因此我們采用另一種方式實(shí)現(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() 確定被點(diǎn)擊的button的下標(biāo)，通過下標(biāo)就可以確認(rèn)images所需要移動(dòng)的距離。

4. 實(shí)現(xiàn)自動(dòng)播放

第三步中已經(jīng)改進(jìn)了切換圖片的實(shí)現(xiàn)方式，不用擔(dān)心輪播圖片的數(shù)量，接下來實(shí)現(xiàn)自動(dòng)播放功能。

let n = 0
setInterval(()=>{
  n += 1
  allButtons.eq(n%5).trigger('click')
}, 1500)

使用 setInterval 定時(shí)器，通過 .eq(n%5) 選中圖片（分別為0,1,2,3,4,0,1,2，...），每隔1.5秒使用 trigger('click') 模擬click事件，由此來實(shí)現(xiàn)自動(dòng)播放功能。

5. 優(yōu)化自動(dòng)播放

接上一步，雖然已經(jīng)實(shí)現(xiàn)了自動(dòng)播放的基本功能，但是仍有許多優(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)

聲明一個(gè)count變量獲取圖片的數(shù)量，然后為當(dāng)前展示的圖片相應(yīng)的button添加 active 樣式并清除其他button的樣式。

6. 實(shí)現(xiàn)暫停、播放功能

通常對(duì)于一個(gè)輪播來說，光標(biāo)懸浮在圖片上停止播放，光標(biāo)離開圖片繼續(xù)播放是基本功能，因此此部分實(shí)現(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)
})

如此一來，一個(gè)簡(jiǎn)單的輪播就完成了。

7. 代碼優(yōu)化

上述的代碼還有很多可以優(yōu)化的空間，有很多重復(fù)的代碼可以使用函數(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)進(jìn)行了一部分優(yōu)化，封裝出 setClock() 函數(shù)、 slideImg() 函數(shù)和 activeButton 函數(shù)，避免了代碼的重復(fù)。

8. 總結(jié)

本文使用jQuery實(shí)現(xiàn)輪播的思路如下：

1. 首先找到對(duì)應(yīng)的按鈕，監(jiān)聽按鈕的click事件，并添加相應(yīng)的樣式
2. 設(shè)置一個(gè)定時(shí)器，使得圖片循環(huán)滾動(dòng)
3. 使用trigger()模擬click事件
4. 監(jiān)聽視窗的mouseenter事件，清除定時(shí)器，實(shí)現(xiàn)光標(biāo)懸浮暫停播放功能
5. 監(jiān)聽視窗的mouseleave事件，添加定時(shí)器，實(shí)現(xiàn)光標(biāo)離開繼續(xù)播放播放功能