使用定位实现无缝滚动

实现思想：在滚动到最后一张的时候，将第一张定位使用相对定位，定位到最后一张的下面

let ul = document.querySelector('ul');
let liArr = ul.querySelectorAll('li');
let olArr = document.querySelector('ol').querySelectorAll('li');
let index = 0;
let num = 0;
let timer = setInterval(function () { if (index === 0) { liArr[0].style.position = 'static'; ul.style.top = 0; num = 0; } if (index === liArr.length - 1) { index = 0; liArr[0].style.position = 'relative'; liArr[0].style.top = liArr.length * 337.5 + 'px'; } else { index++; } num++; olArr.forEach(item => item.classList.remove('active')); olArr[index].classList.add('active'); startMove(ul, {top: -num*337.5}); }, 2000);

备注： 1、当滚动到第一张的时候，需要重置ul的位置，以及把第一张li的定位取消

　　     2、滚动到最后一张的时候，将第一张的li，加上相对定位，top设置为最后一张的下面

　　     3、startMove是运动框架，可以自己实现

转载于:https://www.cnblogs.com/xueZ/p/11277717.html