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

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

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

 

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

 

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

 此时切换到第一张图一

 代码如下

 function itemMove(yes) {
                //点击右边触发
            if (yes) {
                num++;
                //如果是最后一张,立马跳到第一张
                if (num == liEls.length) {
                    num = 1;
                    swiperEl.style.left = 0
                }
            } else {
                num--;
                //如果是第一张则跳到第一张再向左
                if (num == -1) {
                    num = liEls.length - 2;
                    swiperEl.style.left = (liEls.length - 1) * -1 * long + "px"
                }
            }
            //赋值并调用封装好的动画效果
            var targetLeft = num * long * -1
            getLeft(targetLeft, swiperEl)
        }
 //封装动画效果函数
        function getLeft(target, box) {
            var long = 15;
            var currleft = box.offsetLeft; //获取元素左边距
            if (target == currleft) {
                return;
            } //如果相等则不动
            long = target > currleft ? Math.abs(long) : -1 * Math.abs(long) //判断向左或向右
            clearInterval(temp) //再次点击清除上一次的定时器
            temp = setInterval(function() {
                var left = box.offsetLeft;
                left += long; //每一次距离左边的距离
                box.style.left = left + 'px';
                var cha = target - left; //判断是否为最后一次移动,如果是则不用移动,直接移到最后,并清除移动效果
                if (Math.abs(cha) < Math.abs(long)) {
                    box.style.left = target + 'px';
                    clearInterval(temp);
                }
            }, 16.7)
        }