JavaScript——基于定时器的切图练习

You_PPZ

已于 2022-04-20 20:03:53 修改

阅读量265

点赞数 1

文章标签：前端

于 2022-04-07 09:57:53 首次发布

本文链接：https://blog.csdn.net/JiaYou_PPZ/article/details/124006575

版权

1.实现功能，点击开始时每隔500ms自动切图，点击停止时，停止切图

2.代码短如下

    <style>
        div.box {
            width: 500px;
            margin: 50px auto;
            text-align: center;
            background-color: bisque;
        }

        img {
            width: 100%;

        }
    </style>
    <script>

        window.onload = function () {
            /*
            使图片可以自动切换
            */
            // 获取图片标签
            let img = document.getElementById("img");
            // 封装图片src路径
            arrAll = ["./th (1).jpg", "./th.jpg", "./th2.jpg"];
            let btn = document.getElementById("btn");
            let btn1 = document.getElementById("btn1");
            // 让图片自动切换路径
            let i = 1;
            /*
            声明一个变量用于保存标识。
            注意：在btn单击响应事件外申明，若在点击响应函数内声明则无法保留上一次计时器的timer值，
                  导致每次点击开始时开头的clearInterval将会失效。
            */
            let timer;
            btn.onclick = function () {
                /*
                每点一次定时器便会激活一次定时器
                   点击多次就会开启多个定时器，导致图片切换速度过快，
                   并且我们只能关闭最后一次开启的定时器
                */
                //  在开启定时器之前需要将上一个定时器关闭
                clearInterval(timer);

                timer = setInterval(function () {
                    img.src = arrAll[i];
                    i++;
                    // 设置循环
                    // if (i == arrAll.length) {
                    //     i = 0;
                    // }
                    i = i % arrAll.length;//索引号i自增小于长度则返回原值，当索引号i自增等于长度时，初始化i=0。
                    // 设置单击停止事件
                    btn1.onclick = function () {
                        clearInterval(timer);
                    }
                }, 500);
            }


        }

    </script>
</head>

<body>
    <div class="box">
        <p id="info"></p>
        <img id="img" src="./th (1).jpg" alt="">
        <br>
        <button id="btn">开始</button> <button id="btn1">停止</button>
    </div>
</body>

3.主要需解决问题

多次点击开始时，出现切图速度倍增。

4.思维导图

You_PPZ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——基于定时器的切图练习

1.实现功能，点击开始时每隔500ms自动切图，点击停止时，停止切图2.代码短如下 <style> div.box { width: 500px; margin: 50px auto; text-align: center; background-color: bisque; } img { width: 100
复制链接

扫一扫