html无缝滚动原理,JavaScript实现图片无缝滚动效果

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

原理

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

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

if(nav.scrollTop==list[list.length-1].offsetTop){

nav.scrollTop=0

}else{

nav.scrollTop++;

}

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

当向下滚动的距离与l