使用定位实现无缝滚动

Posted 2022-05-31 xuez

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

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是运动框架，可以自己实现