十六、呼吸轮播图的变种（中间加入蒙版）

16.1 DOM

<div class="box" id="box">
    <ul id="carousel">
        <li><img src="images/lunbo2/1.jpg" alt=""></li>
        <li><img src="images/lunbo2/2.jpg" alt=""></li>
        <li><img src="images/lunbo2/3.jpg" alt=""></li>
        <li><img src="images/lunbo2/4.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>
        </ol>
    </div>
</div>

16.2 css 蒙版加在CSS中

<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul, ol {
        list-style: none;
    }
    a {
        text-decoration: none;
    }
    .box {
        width: 880px;
        height: 550px;
        margin: 50px auto;
        border: 1px solid #000;
        position: relative;
        /* 蒙版 */
        background-color: rgba(0,0,0,.2);
        /* 蒙版也可以是背景图 */
        /* background: url(images/lunbo2/5.jpg); */
    }
    /* 呼吸轮播图的关键是所有图片摞在一起 */
    .box ul li {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
    }
    .box ul li:first-child {
        display: block;
    }
    .btns a {
        position: absolute;
        width: 30px;
        height: 60px;
        top: 50%;
        margin-top: -30px;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        font-size: 20px;
        line-height: 60px;
        text-align: center;
        /* 大于小于号开口变大 */
        font-family: consolas;
    }
    .btns a:first-child {
        left: 10px;
    }
    .btns a:last-child {
        right: 10px;
    }
    .box .circles {
        position: absolute;
        width: 110px;
        height: 20px;
        left: 50%;
        margin-left: -55px;
        bottom: 30px;
    }
    .box .circles ol {
        width: 120px;
        
    }
    .box .circles ol li {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-color: white;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
        /* 鼠标样式 小手 */
        cursor: pointer;
    }
    /* .box .circles ol li:last-child {
        margin-right: 0;
    } */
    .box .circles ol li.cur {
        background-color: orange;
    }
</style>

16.3 jquery 上一张和下一张的淡入淡出加回调函数

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

    // 定义length
    var length = $imgs.length;
    // 定义信号量
    var idx = 0;

    // 开启定时器 平时图片轮播，相当于右按钮事件
    var timer = setInterval(change,2000);
    // 鼠标移入 清除定时器
    $box.mouseenter(function(){
        clearInterval(timer);
    });
    // 鼠标离开 开启定时器
    $box.mouseleave(function () {
        // 设表先关
        clearInterval(timer);
        // 重新赋值timer
        timer = setInterval(change,2000);
    });
    // 右按钮点击事件 将函数提取出来
    $rightBtn.click(change);
    function change(){
        // 防流氓
        if($imgs.is(":animated")){
            return;
        }   
        // 当前图片淡出 回调函数 完全淡出之后，下一张图片再淡入
        $imgs.eq(idx).fadeOut(600,function(){
            // 信号量改变
            idx++;
            // 边界判定
            if (idx > length - 1) {
                // idx归0
                idx = 0;
            }
            // 下一张图片淡入
            $imgs.eq(idx).fadeIn(600);
            // 当前小圆点加cur 它的兄弟去掉cur
            $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
            console.log(idx);  // 查看图片顺序  
        });           
    }
    // 左按钮点击事件
    $leftBtn.click(function () {
        // 防流氓
        if (!$imgs.is(":animated")) {
            // 当前图片淡出 回调函数 完全淡出之后，上一张图片再淡入
            $imgs.eq(idx).fadeOut(600,function(){
                // 信号量改变
                idx--;
                // 边界判定
                if (idx < 0) {
                    idx = length - 1;
                }
                // 上一张图片淡入
                $imgs.eq(idx).fadeIn(600);
                // 当前小圆点加cur 它的兄弟去掉cur
                $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
                console.log(idx);  // 查看图片顺序
            });
        }
    });
    // 小圆点事件 鼠标移入
    $circles.mouseenter(function(){
        // 之前图片消失 防流氓，立即切换
        $imgs.eq(idx).stop(true).fadeOut(600);
        // 改变信号量
        idx = $(this).index();
        // 当前图片出现 防流氓，立即切换
        $imgs.eq(idx).stop(true).fadeIn(600);
        // 当前小圆点加cur
        $(this).addClass("cur").siblings().removeClass("cur");
    });
</script>