master

分支 (1)

管理

管理

master

js_study
/
切换图片练习.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <img id="img1" src="./img/01.jpg">
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>
<script>
    // 使图片可以自动切换

    // 获取img标签
    var img1 = document.getElementById("img1");
    var btn01 = document.getElementById("btn01");
    var btn02 = document.getElementById("btn02");
    // 创建一个数组来保存图片的路径
    var imgArr = ["./img/01.jpg", "./img/02.jpg", "./img/03.jpg", "./img/04.jpg", "./img/05.jpg"];
    // 创建一个变量，用来保存当前图片的索引
    var index = 0;
    // 定义一个变量，用来保存定时器的标识
    var clock;


    // 当鼠标点击开始按钮时图片才开始自动切换
    // 目前每点击一次开始按钮就会开启一个定时器，那样图片切换速度会越来越快，需要解决
    btn01.onclick = function () {
        // 解决：再开启定时器之前，要把当前元素上的其他定时器关闭
        clearInterval(clock);
        //开启一个定时器，来自动切换图片
        clock = setInterval(function () {
            index++;
            // 判断索引是否超过最大索引
            if (index >= imgArr.length) {
                // 则将index设置为0
                index = 0;
            }
            // 修改img1的src属性
            img1.src = imgArr[index];
        }, 1000);
    }

    // 点击停止按钮要停止图片切换
    btn02.onclick = function () {
        // 关闭定时器
        clearInterval(clock);
    }
</script>

</html>