js两个定时器实现轮播图

Posted 2020-12-14 尘世间迷茫的小书童

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js两个定时器实现轮播图相关的知识，希望对你有一定的参考价值。

另辟蹊径实现轮播图的方法：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery网络引用地址 -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <title> 两个定时器实现轮播图</title>
</head>

<body>
    <img id="app" src="./images/1.jpg" />
    <br />
    <button id="clear">停止轮播</button>
    <button id="continue">继续轮播</button>
    <button id="pre">上一张</button>
    <button id="next">下一张</button>
    <script>
        //要遍历的图片路径数组
        var images = [\'./images/1.jpg\', \'./images/2.jpg\', \'./images/3.jpg\'];
        //获取图片对象
        var image = document.getElementById("app");
        //下标
        var index = 0;
        //定时器
        var interval, timeOut = 0;
        $(function () {
            // 绑定清除两个定时器的方法
            $("#clear").click(function () {
                console.log(\'清除定时器\');
                window.clearInterval(interval);
                window.clearTimeout(timeOut);
            });

            // 对两个定时器进行重新赋值
            $("#continue").click(function () {
                console.log(\'继续执行定时器\');
                interval = setInterval(function () {
                    timeOut = setTimeout(() => {
                        if (index > (images.length - 1)) {
                            index = 0;
                        }
                        image.src = images[index];
                        index++;
                    }, 1000);
                }, 1500);
            });

            // 根据下标切换图片
            $("#next").click(function () {
                console.log(\'下一张\')
                index++;
                if (index > (images.length - 1)) {
                    index = 0;
                }
                image.src = images[index];
            });

            // 根据下标切换图片
            $("#pre").click(function () {
                console.log(\'上一张\')
                index--;
                if (index < 0) {
                    index = images.length - 1;
                }
                image.src = images[index];
            });

            // 默认执行主体
            interval = setInterval(function () {
                timeOut = setTimeout(() => {
                    if (index > (images.length - 1)) {
                        index = 0;
                    }
                    image.src = images[index];
                    index++;
                }, 1000);
            }, 1500);

        });
    </script>
</body>

</html>

项目结构：

以上是关于js两个定时器实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章