js用定时器实现简单轮播图-蒲公英云

js用定时器实现简单轮播图

描述：用定时器实现简单轮播图，点击开始按钮，图片开始切换，点击停止按钮，图片停止切换。
js代码如下：

<script type="text/javascript">
            window.onload = function(){
                var arr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
                var img = document.getElementById("img2");
                var index=0;
                img.src = arr[index];
                var timer;
                var button5 = document.getElementById("button5");
                button5.onclick = function(){
                    clearInterval(timer);
                    timer = setInterval(function(){//如果多次点击，切换就会很快
        //每点击一次，就会开启一个定时器，只能关闭最后一次，为解决该问题，在开启之前
        //要先关闭
                    if(index == arr.length-1){
                        index = 0;
                    }
                    img.src = arr[index++];
                },1000);
                };
                var button6 = document.getElementById("button6");
                button6.onclick = function(){
                    clearInterval(timer);//该方法可以接受任意一个参数，可以是undefined
                    //如果是有效的标识，则停止相应定时器，否则什么都不做
                };
            };
        </script>

html代码如下：`

<body>
        <div id="box17">
            <img src="../img/1.jpg" id="img2"/>
        </div>
        <div id="box18">
        <button id="button5">开始</button>
        <button id="button6">停止</button>    
        </div>
    </body>