思路：用两倍数量的图片（例如8），当滚动到一半时复位。父元素宽度设置为4对父元素overflow，使得只显示4张图片，看起来就是无缝滚动了。offsetWidth：获取宽度，相应的left左。。
<style>
* {
margin: 0;
padding: 0;
}
清除浏览器默认外边距
#div1 {
width: 1024px;
height: 320px;
margin: 100px auto;
position: relative; 父元素相对定位
overflow: hidden; 隐藏超出的部分
}
#div1 ul{
position: absolute; 子元素绝对定位方便操作
left: 0;
top: 0;
}
#div1 ul li {
float: left; 为了使图片排到一行上
width: 256px;
height: 80px;
list-style: none; 去除无序列表li的默认样式小圆点。
}
</style>
<script>
window.onload=function(){
var oDiv1=document.getElementById("div1");
var oUl=oDiv1.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
oUl.innerHTML+=oUl.innerHTML; 使图片数量翻倍
oUl.style.width=aLi[0].offsetWidth*aLi.length+"px"; 使父元素的宽度适应多出来的图片，排在一行。
setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){ 当滚动到一半时，复位。
oUl.style.left="0";
}
oUl.style.left=oUl.offsetLeft-2+"px"; 使图片向左滚动
},30)
}
</script>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
DOM基础：
首先节点和标签等意义一样，在DOM里这些叫节点。不一样的是DOM存在文本节点（即无标签包裹的地方，文本节点可以为空），和元素节点（标签）。
childNodes：子节点，相应的父节点为parentNode。
nodeType：节点类型，用来看节点类型。
offsetParent：获取第一个有定位的父节点。
children：获取所有子元素节点。
所有兼容性问题都是用if解决的。
获取第一个子元素节点：ie6,7用firstChild，w3c用firstElementChild。同理最后一个子节点用last。
获取兄弟节点：下一个nextSibling，nextElementSibling。上一个previousSibling，previousSibling。
用Dom操作元素：js中用".",也可以选择用 [ ] ，然后还有一种在DOM中的方法是用getAttribute（名称）获取元素，setAttribute（名称，值）设置，removeAttribute（名称）删除。
