js轮播最后一张跳到第一张的处理

如果直接最后一张滑到第一张会显得很僵硬,所以前后都放要显示第一张图片实现前后的切换可以优化这个效果

当此时点击左边的时候,直接跳到最后一张的图一然后往回走,

 点击后此时的图片为最后一张图,再往回走

 同理,当在最后点击下一张时,快速切换为第一张图一,在向后走

 此时切换到第一张图一

 代码如下

1.  
   function itemMove(yes) {
2.  
   //点击右边触发
3.  
   if (yes) {
4.  
   num ;
5.  
   //如果是最后一张,立马跳到第一张
6.  
   if (num == liEls.length) {
7.  
   num = 1;
8.  
   swiperEl.style.left = 0
9.  
   }
10.  
    } else {
11.  
    num--;
12.  
    //如果是第一张则跳到第一张再向左
13.  
    if (num == -1) {
14.  
    num = liEls.length - 2;
15.  
    swiperEl.style.left = (liEls.length - 1) * -1 * long "px"
16.  
    }
17.  
    }
18.  
    //赋值并调用封装好的动画效果
19.  
    var targetLeft = num * long * -1
20.  
    getLeft(targetLeft, swiperEl)
21.  
    }
22.  
    //封装动画效果函数
23.  
    function getLeft(target, box) {
24.  
    var long = 15;
25.  
    var currleft = box.offsetLeft; //获取元素左边距
26.  
    if (target == currleft) {
27.  
    return;
28.  
    } //如果相等则不动
29.  
    long = target > currleft ? Math.abs(long) : -1 * Math.abs(long) //判断向左或向右
30.  
    clearInterval(temp) //再次点击清除上一次的定时器
31.  
    temp = setInterval(function() {
32.  
    var left = box.offsetLeft;
33.  
    left = long; //每一次距离左边的距离
34.  
    box.style.left = left 'px';
35.  
    var cha = target - left; //判断是否为最后一次移动,如果是则不用移动,直接移到最后,并清除移动效果
36.  
    if (Math.abs(cha) < Math.abs(long)) {
37.  
    box.style.left = target 'px';
38.  
    clearInterval(temp);
39.  
    }
40.  
    }, 16.7)
41.  
    }

这篇好文章是转载于：学新通技术网