图片无缝滚动就是图片一直不停的滚动，好像没有无穷无尽似的，实际上就是几张图片不停的循环，但是看不出有从最后面切换到最前面的效果，这就是无缝滚动，文字和图片都可以无缝滚动，这里介绍的是图片，文字是同样的原理。
原理
以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，。
设定一个可视区域，超过可视区域的部分隐藏，这里是将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部分是一样的，就表现的部分是一样的，即
无缝滚动
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
