js图片无缝滚动的原理是什么

JavaScript029

js图片无缝滚动的原理是什么,第1张

以垂直滚动为例：一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思

因为#scroll和#wrap上面都有一些关键样式，尤其的#scroll js事件就是控制它的。如果真要去一个，要把#wrap的样式写到#scroll里，主要相同的样式别冲突，当然最好是别去掉。

oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'

这句话是获取 li 标签（包括 padding 和 border 但不包含 margin）的宽度，这就导致了 ul 的宽度不够，所有的 li 标签不在一行显示 所以就出现了 你看到的那个“停顿”