用jQuery实现轮播

本文的主要内容是使用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事件，添加定时器，实现光标离开继续播放播放功能