javascript文字無縫滾動

效果如圖：

html：（ 一個div 包裹兩個ul ）

<div style="position: absolute; left: 500px; top: 200px; background-color: white; height: 140px; width: 400px; border: solid; 1px; overflow:  hidden;" id="box">
    <ul id="ul1">
        <li><a href="#">1.學會html5 絕對的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
        <li><a href="#">2.tab頁面切換效果（案例）</a><span>2013-10-09</span></li>
        <li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
        <li><a href="#">4.HTML+CSS基礎課程(系列)</a><span>2013-11-01</span></li>
        <li><a href="#">5.分頁頁碼制作（案例）</a><span>2013-11-06</span></li>
        <li><a href="#">6.導覽列菜單的制作（案例）</a><span>2013-11-08</span></li>
        <li><a href="#">7.資訊清單制作(案例)</a><span>2013-11-15</span></li>
        <li><a href="#">8.下拉菜單制作(案例)</a><span>2013-11-22</span></li>
        <li><a href="#">9.如何實作“新手引導”效果</a><span>2013-12-06</span></li>      
    </ul>

    <ul id="ul2"></ul>  

    </div>
           

js代碼：

window.onload=roll;
function roll(){
        var ul1=document.getElementById("ul1");
        var ul2=document.getElementById("ul2");
        var box=document.getElementById("box");
        ul2.innerHTML=ul1.innerHTML;//兩個一模一樣的ul
        box.scrollTop = ;//既是ul1和box的頂部距離
        var timer=setInterval(rollStart,);//定時器
        box.onmouseover=function(){//滑鼠移入暫停
            clearInterval(timer)
        }
        box.onmouseout=function(){//滑鼠移出繼續
            timer=setInterval(rollStart,);
        }


    }
    function rollStart(){
        if (box.scrollTop>=ul1.scrollHeight) {//scrollTop屬性既是scroll最上端和box的距離；
            box.scrollTop=;
        }else{
            box.scrollTop++;
        }   
    }
           

思路：

1.兩個一模一樣的ul放在div裡，第一個占滿div，第二個先被隐藏在下面；

2.div的scrollTop不斷加，ul1向上滾動，ul2也向上滾動進入可視區域；

3.直到div的scrollTop已經等于ul1的高度，此時你可以發現ul2已經占滿div，又因為ul1和ul2是一模一樣的，是以此時将div的scrollTop=0；回到圖一，這一個跳動肉眼是看不出來的；