jQery无缝滚动效果

最新推荐文章于 2024-08-27 15:59:21 发布

aijieyin8659

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Q-zhangsan/p/6127981.html

版权

思路：

赋值所有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" 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>

转载于:https://www.cnblogs.com/Q-zhangsan/p/6127981.html

aijieyin8659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQery无缝滚动效果

思路：赋值所有li，添加到ul末尾,重新计算ul宽度每次移动一个固定的值，当超出一半时，将ul拉回原位以下代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>无缝滚动</title&g...
复制链接

扫一扫