使用jQuery实现一个轮播

作者: 王童孟 | 来源:发表于2018-03-27 19:21 被阅读0次

1. 思路

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

2. html布局与css样式确定

2.1 jQuery引用

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

2.1.1 本地引用

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

<script src="相对路径/绝对路径"></script>

2.1.2 在线引用

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2.2 html页面搭建

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

<body>
  <div class="window">
    <div class="images" id=images>
      <img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="图片1" height=200>
      <img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
      <img src="https://fthmb.tqn.com/0ui_Zw01Ht9NHJkSBlqOIC1IH44=/960x0/filters:no_upscale()/yorkshire-terrier-583788122-581630e85f9b581c0b018a00.jpg" width=300 alt="" height=200>
      <img src="https://canna-pet.com/wp-content/uploads/2017/06/20-longest-living-dog-breeds_canna-pet-e1498599846169.jpg" width=300 alt="" height=200>
    </div>
  </div>
  <span id=buttons>
    <span>第1张</span>
    <span>第2张</span>
    <span>第3张</span>
    <span>第4张</span>
  </span>
</body>

2.2.1 img宽高的设置

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

2.3 css布局

<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .images{
      display: flex;                /*横向布局*/
      align-items: flex-start;
      transition: all 0.5s;         /*过渡动画*/
    }
    .images > img{
      vertical-align: top;
    }
    .window{
      width: 300px;                 /*与img宽度相同*/
      overflow: hidden;             /*window溢出则隐藏*/
    }
  </style>
</head>

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<allButtons.length;i++) {        // 循环伪数组，给按钮添加点击事件
  $(allButtons[i]).on('click', function(x) {  // x 为事件相关合集
    let index = $(x.currentTarget).index()    // x.currentTarget为点击的元素，
    let p = index * (-300)                    // index()是jQuery的api，可以得到该节点处于同级兄弟中的第几位
    $('#images').css({
      transform:'translate(' + p + 'px)'      // 通过index换算出我们需要的位移，动态传入
    })
  })
}

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

3.2 实现轮播图的自动播放

3.2.1 模拟用户点击按钮操作

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

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

for(let i=0;i<allButtons.length;i++) {
  $(allButtons[i]).on('click', function(x) {
    let index = $(x.currentTarget).index()
    let p = index * (-300)
    $('#images').css({
      transform:'translate(' + p + 'px)'
    })
  })
}

let n = 0;
allButtons.eq(n%4).trigger('click')     // eq()可以根据参数选择元素，再通过trigger()触发click事件

setInterval(()=>{                       // 利用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<allButtons.length;i++) {
  $(allButtons[i]).on('click', function(x) {
    let index = $(x.currentTarget).index()
    let p = index * (-300)
    $('#images').css({
      transform:'translate(' + p + 'px)'
    })
  })
}

let n = 0
let size = allButtons.length              // 获取图片的总数量
allButtons.eq(n%size).trigger('click')    //将固定数量4，改为变量size，这样有图片数量变动就不用改这里了，这里算是初始化操作

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

3.3 按钮样式高亮

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

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

for(let i=0;i<allButtons.length;i++) {
  $(allButtons[i]).on('click', function(x) {
    let index = $(x.currentTarget).index()
    let p = index * (-300)
    $('#images').css({
      transform:'translate(' + p + 'px)'
    })
  })
}

let n = 0
let size = allButtons.length              
allButtons.eq(n%size).trigger('click')        
                .addClass('red')                      // jQuery的链式操作，给触发click事件的元素添加class
                .siblings('.red').removeClass('red')  // 找到red类的兄弟元素，并把他们的red类的class移除掉
                     

setInterval(()=>{                      
  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<allButtons.length;i++) {
  $(allButtons[i]).on('click', function(x) {
    let index = $(x.currentTarget).index()
    let p = index * (-300)
    $('#images').css({
      transform:'translate(' + p + 'px)'
    })
    n = index                                     // 通过index确定按钮的位置，n的重复使用是关键
    allButtons.eq(n)                              // 按钮高亮
      .addClass('red')  
      .siblings('.red').removeClass('red')
  })
}

let n = 0
let size = allButtons.length              
allButtons.eq(n%size).trigger('click')        
                .addClass('red')                      
                .siblings('.red').removeClass('red')  
                     

let timerId = setInterval(()=>{                      // 将计时器操作赋值给变量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<allButtons.length;i++) {
  $(allButtons[i]).on('click', function(x) {
    let index = $(x.currentTarget).index()
    let p = index * (-300)
    $('#images').css({
      transform:'translate(' + p + 'px)'
    })
    n = index
    activeButton(allButtons.eq(n))
  })
}

let n = 0
let size = allButtons.length              
allButtons.eq(n%size).trigger('click')        
            
let timerId =  setTimer()

$('.window').on('mouseenter', function() {
  window.clearInterval(timerId)
})
$('.window').on('mouseleave', function() {
    timerId = setTimer()
})

function activeButton($button) {
  $button.addClass('red')
         . siblings('.red').removeClass('red')
}
function setTimer() {
  return setInterval(()=>{                      
  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/