jQery无缝滚动效果

Posted Q_zhangsan

tags:

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

思路：

赋值所有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="img/1.jpg"  /></li>
                <li><img src="img/2.jpg"  /></li>
                <li><img src="img/3.jpg"  /></li>
                <li><img src="img/4.jpg"  /></li>
                <li><img src="img/5.jpg"  /></li>
            </ul>
        </div>
    </body>
</html>

 

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

liMarquee演示12种不同的无缝滚动效果

JQuery实现文字无缝滚动效果 Marquee插件

轮播图采用jsjquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

marquee滚动，无缝连接的代码

怎么实现marquee标签的向上无缝滚动？

让table表头固定，tr超出指定条数后无缝上下循环滚动jquery效果代码