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

JavaScript023

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

以垂直滚动为例：一组图片

控制它的滚动条进行滚动

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

无缝滚动通常采用一个源版块，一个复制版块，两块并排合成一个主体，在一个较小范围的母版块里并排滚动。假设向上滚动那么js每隔几十毫秒设置主体头部减一js判断当版块2的头部减母版块的头部小于等于零时就设置版块主体头部等零，这样就实现了一个循环如果你的判断有误或者错误赋值或者这个主体总长还没有母版块长就会失灵。

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