想问一下老师如何实现间隔一定时间轮播一次图呢？我发现封装之后好像触发不了事件，但是感觉应该比较简单能实现的

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

陆小小

2021-09-07 16:43:43

<!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 ul {
            list-style: none;
        }

        .carousel ul li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease 0s;
        }

        .carousel ul li:first-child {
            opacity: 1;
        }

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

        .carousel .btn {
            position: absolute;
            top: 50%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(238, 14, 14, .5);
        }

        .carousel .lbtn {
            left: 10px;
        }

        .carousel .rbtn {
            right: 10px;
        }
    </style>
</head>

<body>
    <div class="carousel" id="carousel">
        <ul id="list">
            <li><img src="images/beijing/0.jpg" alt=""></li>
            <li><img src="images/beijing/1.jpg" alt=""></li>
            <li><img src="images/beijing/2.jpg" alt=""></li>
            <li><img src="images/beijing/3.jpg" alt=""></li>
            <li><img src="images/beijing/4.jpg" alt=""></li>
        </ul>
        <a href="javascript:;" class="lbtn btn" id="lbtn"></a>
        <a href="javascript:;" class="rbtn btn" id="rbtn"></a>
    </div>

    <script>
        var box = document.getElementById('carousel');
        var list = document.getElementById('list');
        var lbtn = document.getElementById('lbtn');
        var rbtn = document.getElementById('rbtn');
        var lis = document.getElementsByTagName('li');

        //全局变量图号
        var pic = 0;
        //节流锁
        var lock = true;

        //左键全局变量定时器
        var leftbtn;
        //右键全局变量定时器
        var rightbtn;

        //封装函数
        function moveright() {
            //右按钮事件
            rightbtn = rbtn.onclick = function () {
                if (!lock) return;
                lock = false;
                lis[pic].style.opacity = '0';
                pic++;
                if (pic > 4) pic = 0;
                lis[pic].style.opacity = '1';

                setTimeout(function () {
                    lock = true;
                }, 500);
            }
        };

        function moveleft() {
            //左按钮事件
            leftbtn = lbtn.onclick = function () {
                if (!lock) return;
                lock = false;
                lis[pic].style.opacity = '0';
                pic--;
                if (pic < 0) pic = 4;
                lis[pic].style.opacity = '1';

                setTimeout(function () {
                    lock = true;
                }, 500);
            }
        };

        //每一段时间轮播一次图
        setInterval(function () {
            moveright();
        }, 1000);
    </script>
</body>

</html>

写回答

1回答