无缝滚动
Posted sillypasserby
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无缝滚动相关的知识,希望对你有一定的参考价值。
- 功能描述:
常见的图片轮播效果,包括改变图片播放滚动的方向,鼠标移入时停止播放。
- 实现效果:
- 基础知识:
物体移动基础:
利用offsetLeft和定时器让物体连续移动
复制ul里的li元素:
innerhtml和+=,并且修改ul的width属性,使增加后的li位于同一行。
滚动过界:
滚动过界的判断,以及重新设置ul的左边距
效果原理:
利用定时器和offsetLeft,不断修改ul的左边距,实现向左或向右移动的效果。
- 编码思路:
- 示例代码:
以上是关于无缝滚动的主要内容,如果未能解决你的问题,请参考以下文章