定时器应用-切换图片的练习

需求：根据一定的时间切换图片，类似轮播类操作。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            //使图片可以自动切换
            window.onload = function(){
                img = document.getElementById("img1");
                
                var timer
                var imgarr = ['../img/3.jpg','../img/logo.png']
                
                btn = document.getElementById("btn");
                btn1 = document.getElementById("btn1")
                btn.onclick = function(){
                    imgarr = ['../img/3.jpg','../img/logo.png']
                    var index = 0;
                    timer = setInterval(function(){
                        /*
                         * 目前我们点击一次按钮，就会开启一个定时器，
                         * 点击多次就会开启多个定时器，这就导致图片的切换速度过快，
                         * 并且我们只能关闭最后一次开启的定时器
                         * 所以在开启定时器之前，需要将当前元素上的其他定时器关闭。
                         * 
                         */
                        clearInterval(timer);
                        
                        
                        index++;
                        //求余循环
                        index %= imgarr.length
                        console.log(imgarr[index])
                        img.src = imgarr[index]
                    },1000);
                }
                btn1.onclick = function(){
                    
                    /*clearInterval()可以接收任意参数
                     * 如果参数是一个有效的定时器的标识，则停止对应的定时器
                     * 如果参数不是一个有效的标识，则什么都不做，所以timer如果是null的话，也没有问题
                     * 
                     */
                    clearInterval(timer)
                    
                }
            }
            
        </script>
    </head>
    <body>
        <img id="img1" src="../img/3.jpg"/><br />
        <!--点击button再执行-->
        <button id="btn">开始</button>
        <button id="btn1">停止</button>
    </body>
</html>