jQery無縫滾動效果

時間 2019-11-22

標籤 jqery 無縫滾動效果简体版

原文原文鏈接

思路：javascript

賦值全部li，添加到ul末尾,從新計算ul寬度css

每次移動一個固定的值，當超出一半時，將ul拉回原位html

如下代碼java

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>無縫滾動</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                display: block;
            }
            ul,li{
                list-style: none;
            }
            #box{
                width: 440px;
                height: 88px;
                margin: 50px auto;
                border: 3px solid #DCDCDC;
                position: relative;
                overflow: hidden;
            }
            #list{
                position: absolute;
            }
            #list li{
                float: left;
                width: 88px;
                height: 88px;
            }
        </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //將ul的內容複製一遍添加到ul中，
                $('#list').append($('#list').html());
                //改變list的長度
                $('#list').width($('#list li').eq(0).width() * $('#list li').length)
                setInterval(move,10)
            })
            var x = 0; //每次移動的長度
            function move(){
                //判讀超過ul的一半，拉回來從新開始
                if(x <= -($('#list').width()/2)){
                    x = 0;
                }
                $('#list').css('left',x)
                x-=1;
            }
        </script>
    </head>
    <body>
        <div id="box">
            <ul id="list">
                <li><img src="img/1.jpg" alt="" /></li>
                <li><img src="img/2.jpg" alt="" /></li>
                <li><img src="img/3.jpg" alt="" /></li>
                <li><img src="img/4.jpg" alt="" /></li>
                <li><img src="img/5.jpg" alt="" /></li>
            </ul>
        </div>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。