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

2024-12-17 18:45:40
推荐回答(2个)
回答1:

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

回答2:

不断减少图片距离外面容器的间距,然后在间距为0的刹那将图片重新回到初始位置。为了不至于看出破绽,滚动图片要弄双份儿,比如你需要滚动的是AB,那么在容器里放的就是ABAB。那个外面的容器还要设置大小,然后将超出的内容隐藏。

这是我当年自己分析某人的JS图片滚动代码时总结的。

现在嘛都直接整jquery的插件了