js定时器切换图片

最新推荐文章于 2022-12-16 15:24:29 发布

喵俺第一专栏

最新推荐文章于 2022-12-16 15:24:29 发布

阅读量1.5k

点赞数

分类专栏： # Html+css+js项目文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/dengfengling999/article/details/122760734

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

设置两个开始按钮点击可以开启定时器来切换图片，停止按钮来关闭定时器

详细代码：

<!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>
    <script>
        window.onload = function () {
            /*
              是图片可以自动切换
            */
            var img1 = document.getElementById("img1");
            //创建一个数组保存图片的路径
            var imgArr = ["images/a.jpg", "images/b.jpg", "images/c.jpg", "images/d.jpg", "images/e.jpg"];
            //创建一个变量保存当前图片的索引
            var index = 0;
            //定义一个变量，用来保存定时器的标识
            var time;

            //为btn01绑定单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                /*
                  目前，我们每点击依次按钮，就会开启一个定时器，点击多次就会开启多个定时器，这就会导致图片的切换速度变快，并且
                  我们只能关闭最后一个定时器
                */
                //在开启一个定时器之前，需要将上一个定时器关闭
                clearInterval(time);
                
                //开启定时器，来自动切换图片
                time = setInterval(function () {
                    //使索引自增
                    index++;
                    //判断索引是否大于最大索引
                    if (index >= imgArr.length) {
                        //则将index设置为0
                        index = 0;
                    }
                    //判断索引是否大于0另一种写法
                    //index = index % imgArr.length;

                    //修改src的属性
                    img1.src = imgArr[index];
                }, 1000);
            };
            //为btn02绑定单击响应函数
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                //点击按钮停止图片的自动切换，关闭定时器
                clearInterval(time);
            };



        };
    </script>
</head>

<body>
    <img id="img1" src="images/a.jpg" alt=""><br><br>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>

</html>

结果

未点击开始按钮之前：