如果直接最后一张滑到第一张会显得很僵硬,所以前后都放要显示第一张图片实现前后的切换可以优化这个效果
当此时点击左边的时候,直接跳到最后一张的图一然后往回走,
点击后此时的图片为最后一张图,再往回走
同理,当在最后点击下一张时,快速切换为第一张图一,在向后走
此时切换到第一张图一
代码如下
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) }讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/116622.html