jQuery - 间歇模型（无缝滚动） -_jquery定义间歇-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        ul,ol{
            list-style: none;
        }
        .box{
            width: 278px;
            height:78px;
            border:1px solid #333;
            margin:50px auto;
            position: relative;
            overflow: hidden;
        }
        .box .unit{
            width:300px;
            /*高度要足够高*/
            height:9999px;
            position: absolute;
            top:0px;
            left:0px;
        }
        .box .unit li{
            float: left;
            width:78px;
            height:78px;
            margin-right: 22px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="unit" id="unit">
            <li><img src="images/mingxing/0.jpg" alt=""></li>
            <li><img src="images/mingxing/1.jpg" alt=""></li>
            <li><img src="images/mingxing/2.jpg" alt=""></li>
            <li><img src="images/mingxing/3.jpg" alt=""></li>
            <li><img src="images/mingxing/4.jpg" alt=""></li>
            <li><img src="images/mingxing/5.jpg" alt=""></li>
            <li><img src="images/mingxing/6.jpg" alt=""></li>
            <li><img src="images/mingxing/7.jpg" alt=""></li>
            <li><img src="images/mingxing/8.jpg" alt=""></li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
    <script type="text/javascript">
        // 获取元素
        var $unit = $("#unit");
        var amount = $unit.children().length;
        // console.log(amount);9

        // 信号量
        var idx = 0;
        // 克隆前三张图片追加到unit的最后
        $unit.children("li:lt(3)").clone().appendTo($unit);


        // 先拉动再验证
        var timer = setInterval(function(){

            // 信号量改变
            idx ++;
            $unit.animate({"top":-88 * idx},600,function(){
                // 验证
                if(idx > amount/3 - 1){
                    idx = 0;
                    // 瞬移
                    $unit.css("top",0);
                }
            });


        },2600);
    </script>
</body>
</html>