无缝滚动

Posted 2020-11-22 xiaoyaolang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无缝滚动相关的知识，希望对你有一定的参考价值。

无缝滚动

<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>

以上是关于无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章

常用JS图片滚动（无缝平滑上下左右滚动）代码大全

实现公告栏无缝滚动的js代码（转）