Realized idea: scroll to the last one, when the first positioning using relative positioning, positioning to the last one of the following
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);
Note: 1, when the scroll to the first time, you need to reset the position ul, li and the first positioning canceled
2, when the scroll to the last one, the first of Li, together with the relative positioning, top to the last one of the following
3, startMove motion frame, can achieve their own