jQuery实现无限循环滚动

最新推荐文章于 2023-09-21 11:18:04 发布

dongciqiu0026

最新推荐文章于 2023-09-21 11:18:04 发布

阅读量536

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/superCwen/p/9957808.html

版权

jQuery实现无限循环滚动代码如下

<html>

<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            margin:100px auto;
            width:400px;
            height:60px;
            background:red;
            overflow:hidden;
        }
        ul{
            width:800px;
            height:60px;
            position:relative;
        }
        ul>li{
            float:left;
            list-style:none;
            width:100px;
            height:60px;
            text-align:center;
            line-height:60px;
            background:yellow;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        
        $(function(){
            var setLeft=0
            var timer=setInterval(function(){
                setLeft+=-6;
                if(setLeft<=-400){
                    setLeft=0
                }
                $("ul").css('marginLeft',setLeft)    
            },100)
        })
        
    </script>
    
<body>
    <div>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
            <li>li4</li>
        </ul>
    </div>
</body>
</html>