无缝滚动 | 无缝滚动

无缝滚动
<style>
    *{
        margin:0;
        padding:0;
    }
    #content{
        height:200px;
        width:500px;
        background:pink;
        margin:200px;
        position:relative;
        overflow:hidden;
    }
    #box{
        position: absolute;
        top:0;
        left:10px;
    }
    ul{
        list-style: none;
    }
</style>
<body>
    <div id="content">
        <div id="box">
            <ul id="list">
                <li>孙悟空</li>
                <li>猪八戒</li>
                <li>李白</li>
                <li>诸葛亮</li>
                <li>诸葛孔明</li>
                <li>赵云</li>
                <li>关羽</li>
                <li>张飞</li>
                <li>乞丐</li>
                <li>教头</li>
                <li>纳三少</li>
                <li>车夫</li>
            </ul>
            <ul>
                <li>孙悟空</li>
                <li>猪八戒</li>
                <li>李白</li>
                <li>诸葛亮</li>
                <li>诸葛孔明</li>
                <li>赵云</li>
                <li>关羽</li>
                <li>张飞</li>
                <li>乞丐</li>
                <li>教头</li>
                <li>纳三少</li>
                <li>车夫</li>
            </ul>
        </div>
    </div>
</body>
</html>

<script src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
    // 原生 
    var box = document.getElementById("box");
    var sTop = document.getElementById("list");
    var H = sTop.offsetHeight;//ul的高度
    var num = 0;
    function autoPlay(){
        num--;
        box.style.top = num + "px";
        if(num < -H){
            num = 0;
        }
    }
    setInterval(autoPlay,70)



    // jquery 

    // var H = $("#list").height(); 
    // var num = 0; 
    // function autoplay(){
    //     num--;
    //     $("#box").css("top", num) 
    //     if(num < -H){
    //         num = 0;
    //     }
    // }
    // setInterval(autoplay,70)
</script>