1. 静态效果
  2. 任务描述
  • 通过jQuery 实现淡入淡出 轮播图效果
    • 效果:
      -左右点击切换
      -自动轮播
      -鼠标移入 (停止轮播)/ 移出效果 ( 重新自动轮播 )
      -圆点点击效果
      -img淡入淡出效果
  1. 思路
    -页面 : 静态效果布局
    -布局以后 针对任务描述 进行一一添加效果
    -js运行 :
    --首先完成 左右点击切换
    1. 通过jq 语法 对两个按钮进行事件(单击)绑定 $("#next").click(function(){ })
    2. 在执行单击事件时 执行 当前图片 隐藏 下一张图片显示 也就是 从不透明 (opacity : 1 😉 到 全透明 (opacity : 0 ; ) 再到 " 1 " 的过程
    3. 在这之间 要加有 过渡效果 ( transition: all .7s; )
    4. 然而 需要通过 索引值 来控制 当前显示图片是哪一张
    5. 从而 需要创建一个自定变量 ( index ) 让 index 与图片元素长度[ $(".ban_li").length ] 做比较
    6. 判断 执行位置 如果超出 图片元素长度时 也就是 index > $(".ban_li").length -1
    就要在点击 "向下按钮" 时 让 index =0; 回到起始位置 点击 "向上按钮" 时 让 index = $(".ban_li").length -1
    --圆点效果:
    1. 绑定单击事件 添加样式
    2. 在点击 圆点时 要获取到对应的 图片
    3. 在点击后其他圆点展示默认效果
    --定时器:
    1. 创建 自定义变量 [ timer ]
    2. 主要使用于 清空定时器
    --鼠标的 移入 / 移出:
    1. 绑定 hover();效果
    2. 第一个函数 控制鼠标移入 做清除定时器效果
    3. 第二个函数 控制鼠标移出 做重新调用定时器效果 继续自动执行轮播效果
  2. css部分
* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    width: 100%;
    height: 100vh;
    padding-top: 25px;
    box-sizing: border-box;
    background:antiquewhite;
    background-repeat: no-repeat;
}

.banner {
    width: 1200px;
    height: 400px;
    margin: 0px auto;
    position: relative;
}

ul {
    width: 1200px;
    height: 400px;
    /* border: 1px solid lightskyblue; */
    position: relative;

}

.ban_li {
    width: 1200px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .7s;
}

.ban_li img {
    width: 100%;
    height: 100%;
}

#prev {
    width: 40px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    background-color: rgba(134, 134, 134, 0.5);
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("../img/箭头\ \(1\).png");
    background-position: 10px 20px;
    background-repeat: no-repeat;
}

#next {
    width: 40px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    background-color: rgba(134, 134, 134, 0.5);
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("../img/箭头.png");
    background-position: 10px 20px;
    background-repeat: no-repeat;

}

.ol_bot {
    width: 200px;
    height: 25px;
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.o_li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid lightslategray;
}

.o_li:hover {
    background-color: lightblue;
}
  1. html部分
<div class="banner">
    <!-- banner -->
    <ul>
        <li class="ban_li" style="opacity: 1;"><img src="../img/banner01.jpg" alt="图_1"></li>
        <li class="ban_li"><img src="../img/banner02.webp" alt="图_2"></li>
        <li class="ban_li"><img src="../img/banner03.webp" alt="图_3"></li>
        <li class="ban_li"><img src="../img/banner04.webp" alt="图_4"></li>
        <li class="ban_li"><img src="../img/banner05.webp" alt="图_5"></li>
    </ul>
    <!-- 圆点 -->
    <ol class="ol_bot">
        <li class="o_li oli_h"></li>
        <li class="o_li"></li>
        <li class="o_li"></li>
        <li class="o_li"></li>
        <li class="o_li"></li>
    </ol>
    <!-- 左右按键 -->
    <div id="prev"></div>
    <div id="next"></div>
</div>
  1. js部分
<script src="../js/jquery-3.1.1.min.js"> </script>
<script>
    var index = 0;
    var timer = null;

    $("#next").click(function () { // 向下
        get_next();
    })

    $("#prev").click(function () { // 向上
        get_prev();
    })

    $(".o_li").click(function () { //圆点
        $(".o_li").eq($(this).index()).css('background', 'lightblue').siblings('ol>li').css('background',
            'none');
        $(".ban_li").eq($(this).index()).css('opacity', '1').siblings("li").css('opacity', '0');

    })
    // console.log($(".o_li"));

    //向下
    function get_next() {
        index++;
        if (index > $(".ban_li").length - 1) {
            index = 0;
        }
        get_round();
        $(".ban_li").eq(index).css('opacity', '1').siblings("li").css('opacity', '0');
    }

    //向上
    function get_prev() {
        index--;
        if (index < 0) {
            index = $(".ban_li").length - 1;
        }
        get_round();
        $(".ban_li").eq(index).css('opacity', '1').siblings("li").css('opacity', '0');
    }
    //圆点
    function get_round() {
        $(".o_li").eq(index).css('background', 'lightblue').siblings('ol>li').css('background', 'none');
    }

    timer = setInterval(get_next, 3000);

    //移入移出 ( hover )
    $(".banner").hover(function () {
        //清除定时器
        clearInterval(timer);
    }, function () {
        timer = setInterval(get_next, 3000);
    })
</script>