使用jQuery实现一个轮播

1. 思路

通过视窗的原理，将多张图片横排，想让哪张图片显示，只要通过改变它的水平位置即可实现。

2. html布局与css样式确定

2.1 jQuery引用

这里是在js Bin(http://js.jirengu.com/?html,output)上写的代码，jQuery引用可通过勾选自动生成。
如果自己引用的话，有两种方式：

2.1.1 本地引用

在jQuery官网下载页面(http://jquery.com/download/)下载文件到本地，进行引用。

2.1.2 在线引用

在cdnjs官网(https://cdnjs.com/)搜索jQuery，得到在线引用地址，进行引用。

2.2 html页面搭建

页面包括：一个显示窗口，包括4个image图片；一个导航菜单，包括4个点击按钮，用span标签。

  

    

      
      
      
      
    
  
  
    第1张
    第2张
    第3张
    第4张
  

2.2.1 img宽高的设置

注意这里使用的图片宽高设置300*200的，保证之后切换图片的时候，不会出现问题。
既然图片宽高对相同，那为什么还要在img标签上加上width=300和height=200呢？
由于浏览器加载图片有时会出现延迟，这是，它会提供一个占位符，但占位符的宽高与图片不一致，导致文档流发生一次排列。当图片加载完毕后，浏览器会重新渲染页面，进行重排，这样就浪费了性能，所以设置宽高可以避免文档流的重排，节省性能。

2.3 css布局

3. 使用jQuery实现图片轮播

3.1 实现点击按钮切换图片

3.1.1 原始代码

获取所有按钮元素，给每个元素绑定点击事件，点击更改iamges(也就是包裹img的那个元素)的style属性中的水平位置，从而实现视觉上的切换。

let allButtons = $('#buttons > span')           // 获取所有span的伪数组
$(allButtons[0]).on('click', function(event) {  //注意 allButtons[0]是dom不能使用jQuery的api，利用$()封装后就可以了
  $(images).css({
    transform: 'translateX(0)'                  // 注意这里不是css，别加分号；
  })
})
$(allButtons[1]).on('click', function(event) {
  $(images).css({
    transform: 'translateX(-300px)'             // 也可利用margin-left的值进行位置的改变
  })
})
$(allButtons[2]).on('click', function(event) {
  $(images).css({
    transform: 'translateX(-600px)'
  })
})
$(allButtons[3]).on('click', function(event) {
  $(images).css({
    transform: 'translateX(-900px)'
  })
})
点击按钮，即可完成图片切换，如图：

slide1.gif

3.1.3 js代码优化

上述代码缺点是，如果图片数量发生变化，js代码也需要改动，所以需要进一步的优化。

let allButtons = $('#buttons > span')   

for(let i=0;i

现在不管多少轮播中有几张图片，代码都不需要改动了。

3.2 实现轮播图的自动播放

3.2.1 模拟用户点击按钮操作

思路：上述代码可以人为地点击进行图片切换，自动切换就是模拟出人点击按钮的动作即可。

let allButtons = $('#buttons > span')   

for(let i=0;i{                       // 利用setInterval设置代码执行间隔
  n += 1
  allButtons.eq(n%4).trigger('click')   // n%4可以形成循环
}, 1500)                                // 时间间隔1.5s

我们不需要点击，通过计时器它会自动轮播，如下图：

slide2.gif

3.2.2 代码优化，数量不要写死

let allButtons = $('#buttons > span')   

for(let i=0;i{                      
  n += 1
  allButtons.eq(n%size).trigger('click')   
}, 1500)                                

3.3 按钮样式高亮

我们希望图片对应的按钮能够高亮，这样方便我们进行辨认。

let allButtons = $('#buttons > span')   

for(let i=0;i{                      
  n += 1
  allButtons.eq(n%size).trigger('click')
    .addClass('red')
    .siblings('.red').removeClass('red')
  
}, 1500) 

注意：jQuery的链式操作，每次操作完，不是操作最开始的元素，而是在找到的新的元素。
如图所示，按钮也进行了高亮，有了导航栏的效果。

slide3.gif

3.4 消除定时器和用户操作之间的矛盾

上述代码，只是完成了定时器自动播放，当用户进行滑动到图片上方时，定时器并不会停止，从而产生冲突。
解决思路：当鼠标划入到图片，消除定时器；鼠标滑出图片，添加定时器。点击按钮，按钮高亮，图片跳回。

let allButtons = $('#buttons > span')   

for(let i=0;i{                      // 将计时器操作赋值给变量timerId
  n += 1
  allButtons.eq(n%size).trigger('click')
    .addClass('red')
    .siblings('.red').removeClass('red')
  
}, 1500) 
$('.window').on('mouseenter', function() {           // 给.window的div添加鼠标进入事件
  window.clearInterval(timerId)                      // 进入则删除计时器
})
$('.window').on('mouseleave', function() {           // 当鼠标滑出div
    timerId = setInterval(()=>{                      // 再把计时器操作赋值给变量timeId，从而继续计时器操作
      n += 1
      allButtons.eq(n%size).trigger('click')
            .addClass('red')
            .siblings('.red').removeClass('red')
    }, 1500) 
})

效果如图

slide4.gif

3.5 优化代码

哪里有重复代码，哪里就有优化的可能。

let allButtons = $('#buttons > span')   

for(let i=0;i{                      
  n += 1
  allButtons.eq(n%size).trigger('click')
    .addClass('red')
    .siblings('.red').removeClass('red')
  
  }, 1500) 
}

4. 总结

4.1 注意jQuery api与dom api的区分

dom节点是不能用jQuery的api的，需要利用$()调用即可。

4.2 用到的jQuery api有：

• $()
• .on('click',function() {})
• .on('mouseenter',function() {})
• .on('mouseleave',function() {})
• .trigger('click')
• .eq(n)
• .addClass()
• .removeClass()
• .siblings()

4.3 注意全局变量的使用。

5. 参考链接

饥人谷相关课程https://xiedaimala.com/