第二十一章 轮播图

轮播图

    分析:

    复制元素(可以不用js来实现)

        => 原因:就是当最后一张走完的时候会出现留白的现象

        => 为了增加体验效果 , 我们会把第一张复制一份放到最后面

        => 把最后一张复制一份放到最前面

    设置焦点

        => 我们的焦点需要比我们的图片少2个

    自动轮播

        => 就是需要让图片动起来

        => 需要使用到定时器

        => 需要使用反复性定时器

        => 第一次运动 : -1 * bannerBox.clientWidth

        => 第二次运动 : -2 * bannerBox.clientWidth

        => 第三次运动 : -3 * bannerBox.clientWidth

    运动结束

        => 我们也写成函数的形式

        => 这个函数不是上来就调用的

        => 当到了最后一张的时候我们要让图片回到对应位置

        => 焦点也需要跟着移动

        => 图片的索引:  0  1  2  3  4  5  6

        => 焦点的索引:     0  1  2  3  4

    移入移出

        => 移入: 就是停止自动轮 , 需要关闭定时器

        => 移出: 自动轮播开始工作 , 再次调用我们的自动轮播的函数

    点击切换

        => 就是在点击 左右按钮的时候能切换图片

        => 我们在点击焦点的时候也能到达指定的图片

        => 实现方式

            -> 第一种: 单独获取 , 单独设置

            -> 第二种: 事件委托的方式

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        ol,
        li {
            list-style: none;
        }
        
        .banner {
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            margin: 50px auto;
            position: relative;
            overflow: hidden;
        }
        
        .banner>ul {
            width: 500%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
        }
        
        .banner>ul>li {
            flex: 1;
            font-size: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
        }
        
        .banner>ol {
            width: 200px;
            height: 30px;
            background-color: rgba(0, 0, 0, .5);
            border-radius: 15px;
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        
        .banner>ol>li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
        }
        
        .banner>ol>li.active {
            background-color: red;
        }
        
        .banner:hover>div {
            display: flex;
        }
        
        .banner>div {
            width: 30px;
            height: 40px;
            background-color: rgba(0, 0, 0, .3);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: #fff;
            cursor: pointer;
            display: none;
        }
        
        .banner>div:hover {
            background-color: rgba(0, 0, 0, .5);
        }
        
        .banner>div.left {
            left: 0;
            border-radius: 0 20px 20px 0;
        }
        
        .banner>div.right {
            right: 0;
            border-radius: 20px 0 0 20px;
        }
    style>
head>
    <div class="banner">
        
        <ul class="imgBox">
            <li style="background-color: pink;">1li>
            <li style="background-color: skyblue;">2li>
            <li style="background-color: orange;">3li>
            <li style="background-color: purple;">4li>
            <li style="background-color: yellow;">5li>
        ul>
        
        <ol class="pointBox">
            
        ol>
        
        <div class="left"><div>
        <div class="right">>div>
    div>

其中调用的运动函数在上一节