辛苦老师看一下

来源：6-4 编写呼吸轮播特效

我不是胖球球

2021-06-09 10:37:34

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .carousel {
            width: 650px;
            height: 360px;
            border: 1px solid #000;
            margin: 50px auto;
            position: relative;
            /* overflow: hidden; */
        }

        .carousel ul {
            list-style: none;
        }

        .carousel ul li {
            /* 所有li摞在一起 */
            position: absolute;
            top: 0;
            left: 0;
            /* 透明度都是0 */
            opacity: 0;
            /* 加过渡 */
            transition: opacity .5s ease 0;
        }

        .carousel ul li:first-child {
            /* 只有第一张透明度是1 */
            opacity: 1;
        }

        /* 提取共性 */
        .carousel .btn {
            position: absolute;
            /*上下居中 */
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            background-color: rgb(150, 113, 79);
            border-radius: 50%;
        }

        /* 个性 */
        .carousel .leftbtn {
            left: 20px;
        }

        .carousel .rightbtn {
            right: 20px;
        }
    </style>
</head>

<body>
    <!-- carousel:轮播图  -->
    <div class="carousel" id="">
        <ul id="list">
            <li><img src="../../images/0.jpg" alt=""></li>
            <li><img src="../../images/1.jpg" alt=""></li>
            <li><img src="../../images/2.jpg" alt=""></li>
            <li><img src="../../images/3.jpg" alt=""></li>
            <li><img src="../../images/4.jpg" alt=""></li>
        </ul>
        <!-- 点击按钮之后页面会刷新,所以给a添加一句执行空的javascript语句 -->
        <a href="javascript:;" class="btn leftbtn" id="leftbtn"></a>
        <a href="javascript:;" class="btn rightbtn" id="rightbtn"></a>
    </div>

    <script>
        // 得到按钮和ul,ul整体进行运动
        var oLeftbtn = document.getElementById('leftbtn');
        var oRightbtn = document.getElementById('rightbtn');
        var oList = document.getElementById('list');
        var lis = oList.getElementsByTagName('li');

        // 设置全局变量，当前是第几张图显示
        var idx = 0;

        // 节流
        var lock = true;

        // 右按钮监听
        oRightbtn.onclick = function () {
            // 判断节流
            if (!lock) return;

            lock = false;
            // 还没有改idx，此时的idx这个图片就是老图，老图淡出，即opacity为0
            lis[idx].style.opacity = 0;
            idx++;
            if (idx > 4) idx = 0;

            // 改了idx，此时的idx这个图片就是新图，新图淡入，即opacity为1
            lis[idx].style.opacity = 1;

            // 动画结束之后，开锁
            setTimeout(function () {
                lock = true;
            }, 1000);
        }

        // 左按钮监听
        oLeftbtn.onclick = function () {
            // 判断节流
            if (!lock) return;

            lock = false;
            // 还没有改idx，此时的idx这个图片就是老图，老图淡出，即opacity为0
            lis[idx].style.opacity = 0;
            idx--;
            if (idx < 0) idx = 4;

            // 改了idx，此时的idx这个图片就是新图，新图淡入，即opacity为1
            lis[idx].style.opacity = 1;

            // 动画结束之后，开锁
            setTimeout(function () {
                lock = true;
            }, 1000);
        }
    </script>
</body>

</html>