码迷,mamicode.com
首页 > 其他好文 > 详细

使用定位实现无缝滚动

时间:2019-07-31 18:16:06      阅读:89      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!