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

来源：互联网发布：mysql w10 编辑：程序博客网时间：2024/05/22 17:15

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);

相关的代码如下：

<span style="font-family:KaiTi_GB2312;font-size:14px;"><!DOCTYPE html><html><head><meta charset="UTF-8"><title>定时器实现的图片无缝滚动</title><style>*{padding: 0;margin: 0;}#div1{position: relative;width:820px;height: 155px;margin: 100px auto;overflow: hidden;}#div1 ul{position:absolute;top:0;left: 0;background: #5F9EA0;}#div1 ul li{list-style: none;width: 205px;height: 155px;float: left;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');var oUl=oDiv.getElementsByTagName('ul')[0];var aLi=oUl.getElementsByTagName('li'); var speed=2;  //利用速度speed控制方向；oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//求ul的宽度；oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//移动的函数；function move(){if(oUl.offsetLeft<-oUl.offsetWidth/2){//由于offsetLeft为一个负值，所以需要加一个负号；oUl.style.left='0';}//由右向左；if(oUl.offsetLeft>0){oUl.style.left=-oUl.offsetWidth/2+'px';}//由左向右；oUl.style.left=oUl.offsetLeft+speed+'px';}var timer=setInterval(move,30);//鼠标移入，关闭定时器；oDiv.onmouseover=function(){clearInterval(timer);};//鼠标移出，开启定时器；oDiv.onmouseout=function(){timer=setInterval(move,30);};document.getElementsByTagName('a')[0].onclick=function(){speed=-2;};document.getElementsByTagName('a')[1].onclick=function(){speed=2;}};</script></head><body><a href="javascript:;">向左</a><a href="javascript:;">向右</a><div id="div1"><ul><li><img src="img/p1.png"></li><li><img src="img/p2.png"></li><li><img src="img/p3.png"></li><li><img src="img/p4.png"></li></ul></div></body></html></span><span style="font-size: 18px;"></span>

0 0