JavaScript实现图片无缝滚动效果

图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字图片都可以无缝滚动,这里介绍的是图片文字是同样的原理。

原理

以向上无缝滚动为例,其余几个方向的无缝滚动原理是一样的,

设定一个可视区域,超过可视区域的部分隐藏,这里是将nav部分作为可视区域,ul#img是中包含所有的图片,实现无缝滚动的关键地方在这:

这里的nav.scrollTop是指当前的可视对象nav的顶端与正在显示的对象ul#img的顶端的距离,通俗一点来说,就是滚动条向下滚动的距离;list[i]就是要显示的图片列表,list[list.length-1]是指最后一张图片,list[list.length-1].offsetTop是指最后一张图片的顶部到它的父元素的顶部的距离,这个距离是不变固定的,父元素的position必须不能是static(默认的),而且也不能是div,否则会跳过这个元素把上一级当成父元素。

可以发现这里重叠了一张图片,是因为当最后一张图片滚动完之后要形成循环,可视区域内一定要有图片否则一片空白,这里设定的可视区域就是一张图片的高度,故重复的是图片1,如果比一张图片高度要大,则需按顺序多重复几张图片列表的图片。

html部分

四个方向:向上、向下、向左、向右的无缝滚动的html部分是一样的,就表现的部分是一样的,即

无缝滚动