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