machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!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 () {

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

            //获取img标签
            var img1 = document.getElementById('img1');
            //创建一个数组，来保存图片的路径
            var imgArr = ["img/1.jpeg", "img/2.jpeg", "img/3.jpeg", "img/4.jpeg", "img/5.jpeg"];

            //创建一个变量，用来保存当前图片的索引
            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;
                    };
                    //上面的if语句可以改写成下面的语句
                    // index = index % imgArr.length;
                    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>
    <button id="btn01">开始</button><button id="btn02">停止</button>
    <br><br>
    <img id="img1" src="img/1.jpeg" />

</body>

</html>