十九、间歇模型布局

我们想让轮播图显示3张图片，我们的编程思路是使用定时器。我们想要使图片每2s更换一次，然后完成动画的时间是600ms。那么定时器的时间应该是它们的加和2600ms。

19.1 DOM

<div class="carousel" id="carousel">
    <ul class="unit" id="unit">
        <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>
        <li><img src="images/mingxing/9.jpg" alt=""></li>
    </ul>
</div>

19.2 css

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul, ol {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    .carousel {
        width: 640px;
        height: 200px;
        margin: 50px auto;
        border: 3px solid #000;
        position: relative;
    }
    /* unit的高度要足够高，并且能够盛放3张图片 */
    .unit {
        width: 660px;
        height: 50000px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .unit li {
        float: left;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
</style>

19.3 jquery

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $unit = $("#unit");
    var $carousel = $("#carousel");
    var length = $unit.children("li").length;
    // var length = $unit.find("li").length;

    // 定义信号量 对应的是每一行：0、1、2
    var idx = 0
    // 克隆第一行（小于3），追加到unit的最后
    $unit.children("li:lt(3)").clone().appendTo($unit);

    // 开启定时器
    var timer = setInterval(rightBtn,2600);
    // 当鼠标移入carousel停止定时器
    $carousel.mouseenter(function(){
        // 清除定时器
        clearInterval(timer);
    });
    // 当鼠标离开carousel重启定时器
    $carousel.mouseleave(function(){
        // 设表先关 用户会多次鼠标进入离开，会多次开启定时器，所以要先关掉定时器再重启
        clearInterval(timer);
        // 重启定时器 重新赋值timer
        timer = setInterval(rightBtn,2600);
    });

    // 定义一个函数，相当于右按钮点击事件
    function rightBtn(){
        // 没有左右按钮，不需要防流氓
        // 右按钮的拉动策略：先拉动，再瞬移
        idx++;
        // 拉动
        $unit.animate({"top": -220 * idx},600,function(){
            // 当猫腻图完全显示之后，验证信号量
            if(idx > length / 3 - 1){
                idx = 0;
                // 瞬间移动到真图
                $unit.css("top",0);
            }
        });
    }   
</script>

19.4 如果length不能整除，则猫腻图会钻空子，自动补全上面多余的位置

解决方法：

对length取余，多几个空位置，补几个<li></li>标签

<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $unit = $("#unit");
    var $carousel = $("#carousel");
    var length = $unit.children("li").length;
    // var length = $unit.find("li").length;
    // 补充空li 保证每一行有3张图片
    if(length % 3 === 1){
        // 补充2个空li
        $("<li></li><li></li>").appendTo($unit);
    }else if(length % 3 ===2){
        // 补充1个空li
        $("<li></li>").appendTo($unit);
    }

    // 定义信号量 对应的是每一行：0、1、2
    var idx = 0
    // 克隆第一行（小于3），追加到unit的最后
    $unit.children("li:lt(3)").clone().appendTo($unit);

    // 开启定时器
    var timer = setInterval(rightBtn,2600);
    // 当鼠标移入carousel停止定时器
    $carousel.mouseenter(function(){
        // 清除定时器
        clearInterval(timer);
    });
    // 当鼠标离开carousel重启定时器
    $carousel.mouseleave(function(){
        // 设表先关 用户会多次鼠标进入离开，会多次开启定时器，所以要先关掉定时器再重启
        clearInterval(timer);
        // 重启定时器 重新赋值timer
        timer = setInterval(rightBtn,2600);
    });

    // 定义一个函数，相当于右按钮点击事件
    function rightBtn(){
        // 没有左右按钮，不需要防流氓
        // 右按钮的拉动策略：先拉动，再瞬移
        idx++;
        // 拉动
        $unit.animate({"top": -100 * idx},600,function(){
            // 当猫腻图完全显示之后，验证信号量
            if(idx > $unit.children().length / 3 - 2){
                idx = 0;
                // 瞬间移动到真图
                $unit.css("top",0);
            }
        });
    }   
</script>