让物体运动起来：
offsetLeft是物体的左边距
实例：
做一个横向的滚动条，让其往左边滚动，
，
先设好基本样式，特别注意div1和ul的绝对定位和相对定位，如果div不设置相对定位，那么ul的滚动条就会以整个页面为相对位置，在left:0和top:0的位置进行滚动，也就是页面左上角，（本来是页面中间）
如果ul不设置绝对定位或者设置在li上，那么都不会滚动。
但是这样写好之后出现了如下的问题：
四张图片不会轮回滚动，图片滚过之后，剩下的背景就变成了背景色了。
想要让四张图片反复的滚动，就要在第四张图片之后接上第一张图片
那就加上这句代码：，
innerHTML就是指div中的li，这样子虽然可以让他第四张之后接上第一张图片，但是仍然只能轮回两次，而且会出现这样的效果，因为ul的宽度不够8张图片。
添加如下的代码，就可以让图片在一行里显示了。
注意顺序不能写错!
上面说到，让四张图片反复滚动的代码不靠谱，因为不管+多少次，总有滚到尽头的时候。
仔细想想，当四张图片滚完之后，后四张图片仍然是和前四张一模一样的，那我们可以用最快的方法，当前四张图片滚完，后四张图片全部出现时，将前四张图片迅速拉回来，
代码如下：
当然不能让用户看到八张图片，每次只能看到四张，所以要在div1中设一下：
也就是溢出的部分隐藏。
无缝滚动——扩展
以上写的是向左滚，但是有的页面可以让用户自动选择向右滚还是向左滚，如果向右滚的话，改成：，但是这样又会出现左边有红色背景的问题了。
加入如下代码就OK了。
在实际情况中，当用户把鼠标移到滚动条上时，说明要读取里面的内容，应该让滚动条停止。
，当鼠标移出滚动条时，要在function中加入setInterval中一模一样的代码，即
，这样重复了两个一模一样的代码，显得特别的繁冗，所以就把定时器里的这段代码单独取一个名字move
然后把定时器的这段代码放入onmouseout中就全部完成了。
接下来再拓展一个功能，点击向左按键就向左滚动。
先设两个超链接:：
注意href中的javascript：；一定要写
再定义一个speed ,还要把这行代码中原本是10改成speed
然后再加入如下代码就完成了。
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding:0;
}
#div1{
position: relative;
width: 712px;
height: 108px;
margin: 100px auto;
/*background: red;*/
overflow: hidden;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
#div1 ul li{
float: left;
list-style: none;
width: 178px;
height: 108px;
}
</style>
</head>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=10;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
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,100);
oDiv.onmouseover=function(){
clearInterval(timer);
}
oDiv.onmouseout=function(){
timer=setInterval(move,100);
}
document.getElementsByTagName('a')[0].onclick=function(){
speed=-10;
}
document.getElementsByTagName('a')[1].onclick=function(){
speed=10;
}
}
</script>
<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
</div>
</body>
</html>