十七、滚动轮播图

17.1 DOM

<div class="carousel" id="carousel">
    <ul class="unit" id="unit">
        <li><img src="images/lunbo/1.jpg" alt=""></li>
        <li><img src="images/lunbo/2.jpg" alt=""></li>
        <li><img src="images/lunbo/3.jpg" alt=""></li>
        <li><img src="images/lunbo/4.jpg" alt=""></li>
        <li><img src="images/lunbo/5.jpg" alt=""></li>
    </ul>
    <div class="btns">
        <a href="javascript:void(0)" id="leftBtn">&lt;</a>
        <a href="javascript:void(0)" id="rightBtn">&gt;</a>
    </div>
    <div class="circles" id="circles">
        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</div>

17.2 css

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul, ol {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    .carousel {
        width: 220px;
        height: 150px;
        margin: 50px auto;
        border: 5px solid red;
        position: relative;
        /* 超出部分 溢出隐藏 */
        overflow: hidden;
    }
    /* 滚动轮播图的关键是所有图片并排在一起 
        unit的宽要足够
    */
    .carousel .unit {
        width: 9999px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .carousel .unit li {
        float: left;
        width: 220px;
        height: 150px;
    }
    .btns a {
        position: absolute;
        width: 30px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
    }
    .btns a:first-child {
        left: 10px;
    }
    .btns a:last-child {
        right: 10px;
    }
    .circles {
        position: absolute;
        width: 140px;
        height: 20px;
        left: 50%;
        margin-left: -70px;
        bottom: 15px;
    }
    .circles ol {
        width: 150px;
    }
    .circles ol li {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-color:white;
        border-radius: 50%;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
    }
    .circles ol li.cur {
        background-color: orange;
    }
</style>

17.3 jquery

<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $leftBtn = $("#leftBtn");
    var $rightBtn = $("#rightBtn");
    var $unit = $("#unit");
    var $circles = $("#circles ol li");
    var $carousel = $("#carousel");

    // 定义length 只能用$circles
    var length = $circles.length;
    // 定义信号量
    var idx = 0;

    // 开启定时器 平时图片轮播，相当于右按钮事件
    var timer = setInterval(change,2000);
    // 鼠标移入 清除定时器
    $carousel.mouseenter(function(){
        clearInterval(timer);
    });
    // 鼠标离开 开启定时器
    $carousel.mouseleave(function () {
        // 设表先关
        clearInterval(timer);
        // 重新赋值timer
        timer = setInterval(change,2000);
    });

    // 克隆第一张图片 追加到最后一张
    $unit.children("li:first").clone().appendTo($unit);

    // 右按钮点击事件 将函数提取出来
    $rightBtn.click(change);
    function change(){
        // 防流氓
        if($unit.is(":animated")){
            return;
        }
        // 拉动策略：先拉动，再瞬移（拉动到克隆的最后一张猫腻图，再瞬移到和第一张相同的图上）   
        // 信号量改变
        idx++;
        // 信号量 有效值：0、1、2、3、4、5（5是猫腻图）
        // 下一张图片滚动出现
        $unit.animate({"left" : - 220 * idx},600,function(){
            // 当猫腻图完全显示之后 验证信号量
            if(idx > length - 1){
                idx = 0;
                // 瞬间移动到真图
                $unit.css("left", 0);
            }
        });
        // 当前小圆点加cur 它的兄弟去掉cur 
        // 如果放在回调函数中，idx值能正确显示，但会在切换完图片（600ms）之后给小圆点加cur
        // 0~4是有效值，5对应的是猫腻图 
        // 定义一个变量用于中转信号量 三元表达式
        var i = idx <= length - 1 ? idx : 0;
        $circles.eq(i).addClass("cur").siblings().removeClass("cur");
        console.log(i);  // 查看图片顺序  
    };           
    // 左按钮点击事件
    $leftBtn.click(function () {
        // 防流氓
        if (!$unit.is(":animated")) {
            // 拉动策略：先瞬移，再拉动（先瞬移到克隆的最后一张猫腻图，再拉动到下一张）   
            // 信号量改变
            idx--;
            // 边界判断 信号量 有效值：0、1、2、3、4、5（5是猫腻图）
            if (idx < 0) {
                idx = length - 1;
                // 瞬间移动到猫腻图
                $unit.css("left", - 220 * length);
            }
            // 
            // 上一张图片滚动出现
            $unit.animate({ "left": - 220 * idx }, 600);
            // 当前小圆点加cur 它的兄弟去掉cur 
            $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
            console.log(idx);  // 查看图片顺序 
        }
    });
    // 小圆点事件 鼠标移入
    $circles.mouseenter(function(){
        // 改变信号量
        idx = $(this).index();
        // 当前图片出现 防流氓 stop(true)
        $unit.stop(true).animate({ "left": - 220 * idx },600);
        // 当前小圆点加cur
        $(this).addClass("cur").siblings().removeClass("cur");
    });
</script>