原生javascript實現無縫滾動

實現javascript的無縫滾動須要掌握基本的定位和運動知識
逐步分析圖片的無縫滾動是怎麼實現的
HTML的基本結構以下

<div id='moving'>
  <ul>
    <li><img src='1.jpg' /></li>
    <li><img src='2.jpg' /></li>
    <li><img src='3.jpg' /></li>
    <li><img src='4.jpg' /></li>
  </ul>
</div>
<div id='control'>
  <input id='left' type="button" value="Left" />
  <input type="button" id="stop" value="Stop" />
  <input id='right' type="button" value="Right" />
</div>

CSS樣式：

#moving {
  width: 600px;
  height: 370px;
  background-color: #ccc;
  position: relative;
  margin: 30px auto 0;
  overflow: hidden;
}
#moving ul {
  position: absolute;
  left: 0;
  top: 0;
}
#moving ul li {
  list-style: none;
  float: left;
}
#control {
  width:300px;
  margin: 20px auto;
}
#control input {
  margin-left: 30px;
  width: 50px;
}

要實現圖片窗口總體的無縫滾動（咱們須要經過定時器定時改變<ul>的位置，因而咱們有下面的片斷來實現：

oUl.style.left = oUl.offsetLeft + speed + 'px';

speed對應定時器時間段內移動的距離，oUl指ul
    開始這樣作能實現基本的運動，可是圖片老是數量有限的，當最後一張圖片滾動展現完畢後，後面就沒有了內容。那麼咱們如何克服這個困難，讓滾動一直持續循環下去呢？
    爲了達到這種效果，咱們能夠克隆一樣的ul結構，而且拼接在一塊兒，好比：

oUl.innerHTML += oUl.innerHTML;

注意不要漏了在ul加入overflow:hidden，不然可能會兩欄顯示
可是這樣作仍是不夠的，圖片總會播放完，可是咱們不可能複製成千上萬分同樣的ul結構
這時候須要一點小技巧
當左段ul（爲了闡述方便，分爲兩段，左段爲原始，右段爲複製的那份）滾動完成，右段的開頭即將離開圖片窗口的時候，將整個ul拉回到原始位置。若是是向右運動，那麼當左端的開頭第一張圖片到左邊盡頭時，整個ul拉回到起始位置

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';
        }

如下是javascript部分

window.onload = function(){
        var oMove = document.getElementById('moving');
        var oUl = oMove.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var oCtr = document.getElementById('control');
        var oLeft = document.getElementById('left');
        var oRight = document.getElementById('right');
        var speed = null;

        oUl.innerHTML += oUl.innerHTML;  //兩段同樣的內容
        oUl.style.width = aLi[0].offsetWidth*aLi.length + "px";  //兩段ul寬度不夠，第二段會掉下去

        oLeft.onclick = function(){
            return speed = -3;
        }
        oRight.onclick = function(){
            return speed = 3;
        }

        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);
        oMove.onmouseover = function(){
            clearInterval(timer);
        };
        oMove.onmouseout = function(){
            timer = setInterval(move,30);
        };

        var btn = document.getElementById("stop");
        btn.onclick = function(){
            clearInterval(timer);   //stop按鍵中止運動，若是在點擊後將鼠標先移入圖片再移出會從新開啓
        }
    }

以上是智能社課程學習內容