1.无缝滚动——基础
物体运动基础
让Div移动起来
offsetLeft的作用
用定时器让物体连续移动
offsetLeft：
获取物体的左边距；最大的优点在于可以综合考虑所有影响这个物体位置的因素之后，得出来一个最终的结论。
如果仅仅取left，margin就考虑不到；
offsetLeft/offsetTop : offsetTop获取物体的上边距
offsetWidth/offsetHeight : 获取物体的宽度以及高度；
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1 {width:200px; height:200px; background:red; position:absolute; left:200px; top:150px; margin:50px;}</style></head><body><div id="div1" onclick="alert(this.offsetLeft);"></div></body></html> 无缝滚动demo：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#div1 ul {position:absolute; left:0; top:0;}#div1 ul li {float:left; width:178px; height:108px; list-style:none;}</style><script>window.onload=function (){ ???var oDiv=document.getElementById(‘div1‘); ???var oUl=oDiv.getElementsByTagName(‘ul‘)[0]; ???var aLi=oUl.getElementsByTagName(‘li‘); ???????var speed=-2; ???????oUl.innerHTML+=oUl.innerHTML; ???oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘; ???????function move(){ ???????if(oUl.offsetLeft<-oUl.offsetWidth/2) ???????{ ???????????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="img2/1.jpg" /></li> ???????<li><img src="img2/2.jpg" /></li> ???????<li><img src="img2/3.jpg" /></li> ???????<li><img src="img2/4.jpg" /></li> ???</ul></div></body></html>------------
学习blus老师js(3)--定时器的使用
原文地址：http://www.cnblogs.com/tenWood/p/7669179.html