Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

1、无缝滚动

原理：（1）让div动起来，让ul一直向左/向右移动；

      （2）即利用定时器让物体从左到右或从右到左进行滚动。

采用offsetLeft——如oUl.style.left=oUl.offsetLeft-2+'px';（由左向右）

注意：offsetLeft为一个负值。

步骤：（1）复制li——innerHTML和+=，

      （2）修改ul的width—可把之前的1倍宽度扩充到两倍

例如oUl.innerHTML=oUl.innerHTML+oUl.innerHTML；

      （3）滚动过界时，重设位置，需要进行判断

2、无缝滚动的扩展

（1）改变滚动的方向

a、修改滚动的速度speed

若改变大小，即表示滚动的速度发生改变

若改变正负，即表示滚动的方向

b、修改判断条件

通过修改speed的正负，来改变滚动的方向

（2）鼠标移入、暂停事件

a、鼠标移入：关闭定时器clearInterval(timer);

 b、鼠标移出：重新开启定时器，即setInterval(function,1000);

相关的代码如下：

	
		
		
		
		
	
	
		向左
		向右