首页 > 代码库 > jQery无缝滚动效果

jQery无缝滚动效果

2024-08-24 21:37:41   219人阅读

思路：

赋值所有li，添加到ul末尾,重新计算ul宽度

每次移动一个固定的值，当超出一半时，将ul拉回原位

以下代码

<!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="http://www.mamicode.com/img/1.jpg"  /></li>
                <li><img src="http://www.mamicode.com/img/2.jpg"  /></li>
                <li><img src="http://www.mamicode.com/img/3.jpg"  /></li>
                <li><img src="http://www.mamicode.com/img/4.jpg"  /></li>
                <li><img src="http://www.mamicode.com/img/5.jpg"  /></li>
            </ul>
        </div>
    </body>
</html>

 

jQery无缝滚动效果


联系
我们