js使图片水平方向重复移动

参考：

JS实现图片自动滚动(图片横向滚动)

html:

<div id="div1">
  <ul style="border:5px solid yellow">
    <li><img src="14628471_1200x1000_0.jpg" alt=""></li>
    <li><img src="14628483_1200x1000_0.jpg" alt=""></li>
    <li><img src="14628489_1200x1000_0.jpg" alt=""></li>
    <li><img src="14628487_1200x1000_0.jpg" alt=""></li>
  </ul>
</div>

css:

* {
    margin: 0;
    padding: 0;
}
#div1 {
    width: 712px;
    height: 128px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
#div1 ul {
    position: absolute;
    left: 0;
    top: 0;
}
#div1 ul li {
    float: left;
    width: 178px;
    height: 108px;
    list-style: none;
 //margin-left: 10px;
    border: 5px solid red;
}
img {
    width: 178px;
    height: 108px;
}

js:

window.onload=function(){
                var oDiv  =  document.getElementById('div1');
                var oUl = document.getElementsByTagName('ul')[0];
                var Li = oUl.getElementsByTagName('li');//获取ul下的所有li
                //alert(Li.length); length=4
                oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加（以便滚出一遍后出现空的断层）
                oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度
                //alert(Li.length); length=8
                var speed = 2
                
                //主方法
                function move(){
                    //滚出一半，重新滚动(加speed,是因为后面left会直接跳到0-speed上
                    if(oUl.offsetLeft<=-oUl.offsetWidth/2+speed){
                        oUl.style.left = '0'
                    }
                    //使用图片向左滚动
                    oUl.style.left = oUl.offsetLeft-speed+'px';//进行左横向滚动
                }

                //调用方法
                var timer = setInterval(move,30)

                //鼠标指向的时候 暂停
                oDiv.onmouseover=function(){
                    clearInterval(timer);
                }    

                //鼠标离开之后 继续滚动
                oDiv.onmouseout=function(){
                     timer = setInterval(move,30)
                }                                 
            }            

补充：

offsetLeft与style.left的区别

JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别

原生js—offsetWidth、screenWidth、clientWidth、innerWidth、outerWidth

offsetLeft 获取的是相对于父对象的左边距
left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距

如果父div的position定义为relative,子div的position定义为absolute，
那么子div的style.left的值是相对于父div的值，这同offsetLeft是相同的，区别在于：

1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，
   如果需要对取得的值进行计算，还用offsetLeft比较方便。
2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。
3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，
   如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。

offsetLeft则仍然能够取到，无需事先定义div的位置。

 offsetWidth = width + 左右padding + 左右boder