切换图片定时器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img1{
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){

            /* 
                使图片可以自动切换
            */

            // 获取img标签
            var img1=document.getElementById("img1");

            // 创建一个数组来保存图片的途径
            var imgArr=["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg"]
            // 创建一个变量，用来保存当前图片的索引
            var index=0;

            // 定义一个变量，用来保存定时器的标识
            var timer;
            // 为btn01绑定一个单击响应函数
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){

                /* 
                    目前，我们每点击一次按钮，就会开启一个定时
                    点击多次就会开启多个定时器，这就导致图片的切换速度过快，

                    并且我们只能关闭最后一次开启的定时器
                */

                // 在开启定时器之前，需要将当前元素上的其他定时器关闭
                clearInterval(timer);

                /* 
                开启一个定时器，来自动切换图片
            */
                timer=setInterval(function () {
                    // 使索引自增
                    index++;
                    // 判断索引是否超过最大索引
                    /* if(index>=imgArr.length){
                        // 则将index设置为0
                        index=0;
                    } */
                    index %= imgArr.length;
                    // 修改img1的src属性
                    img1.src = imgArr[index];
                }, 1000);
            };
            // 为btn02绑定一个单击响应函数
            var btn02=document.getElementById("btn02");
            btn02.onclick=function(){
                // 点击按钮以后，停止图片的自动切换，关闭定时器
                /* 
                    clearInterval()可以接收任意参数，
                     如果参数是一个有效的定时器的标识，则停止对应的定时器
                     如果参数不是一个有效的标识，则什么也不做
                */
                clearInterval(timer);
            };

            
        };

        
    </script>
</head>
<body>
    <img id="img1" src="./img/1.jpg" />
    <br/></br>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>
</html>

 

 

点击开始，开始切换图片，点击停止，停止图片切换

posted @ 2020-12-28 16:23  Hhhr  阅读(132)  评论(0)    收藏  举报