标签:UNC 思想 ola === selector span text ext index
实现思想:在滚动到最后一张的时候,将第一张定位使用相对定位,定位到最后一张的下面
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是运动框架,可以自己实现
标签:UNC 思想 ola === selector span text ext index
原文地址:https://www.cnblogs.com/xueZ/p/11277717.html