jQuery - 间歇模型（无缝滚动） -

最新推荐文章于 2024-04-23 11:28:13 发布

赵羽珩

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量643

点赞数

分类专栏： jquery

jquery 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!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>

赵羽珩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery - 间歇模型（无缝滚动） -

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; } ul,o
复制链接

扫一扫