1、效果解释:
无缝滚动滚动轮播图,当鼠标从第一张跳到第五张的时候,轮播图就会滚动四张,对于有些用户而言,等待时间较长,效果不是很好
而当前的轮播图是,无论你是从第一张滑动到最后一张,或是从中间一张,滑动到第一张,都只滚动一张
2、实现思路:
利用绝对定位,记录上次索引值,判断上次和当前索引的大小
如果大于上次索引,则将需要滚动的图片left设置为宽度,并将上次图片慢慢滑动到-宽度的位置,之后将需要滚动的图片慢慢滑动到left为0的位置,同理可得小于的情况
3、代码
let ul = document.querySelector('ul'); let liArr = ul.querySelectorAll('li'); let distance = liArr[0].offsetWidth; let olArr = document.querySelector('ol').querySelectorAll('li'); let bool = true; let lastIndex = 0; olArr.forEach((item, index) => { item.index = index; liArr[index].style.left = distance + 'px'; liArr[0].style.left = 0; item.addEventListener('click', function () { if (!bool) return; bool = false; olArr.forEach(item => item.classList.remove('active')); this.classList.add('active'); if (lastIndex < this.index) { liArr[this.index].style.left = distance + 'px'; startMove(liArr[lastIndex], {left: -distance}) } else { liArr[this.index].style.left = -distance + 'px'; startMove(liArr[lastIndex], {left: distance}) } startMove(liArr[this.index], {left: 0}, function () { bool = true; }) lastIndex = this.index; }) })
备注:startMove为运动框架