定时器，换图片

<script type="text/javascript">
        window.onload = function() {
            //获取图片
            var img1 = document.getElementById('img1');
            //把图放在一个数组里面
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
            //获取按钮1
            var btn01 = document.getElementById('btn01')
                //获取按钮2
            var btn02 = document.getElementById('btn02')
                //设置数组的索引
            var index = 0;
            //定义一个变量，用来保存定时器的标识
            var timar
            btn01.onclick = function() {
                /*
                 * 目前，我们每点击一次按钮，就会开启一个定时器，
                 *     点击多次就会开启多个定时器，这就导致图片的切换速度过快，
                 *     并且我们只能关闭最后一次开启的定时器
                 */

                //在开启定时器之前，需要将当前元素上的其他定时器关闭
                clearInterval(timer);
                timar = setInterval(function() {
                    //让索引则增
                    index++;
                    if (index >= imgArr.length) {
                        //当index大于索引的时候返回第一章图
                        index = 0
                    }
                    img1.src = imgArr[index];
                }, 1000)
            }
            btn02.onclick = function() {
                clearInterval(timar)
            }

        };
    </script>

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