js定时器切换图片

最新推荐文章于 2022-12-16 15:24:29 发布

追梦杰尼龟

最新推荐文章于 2022-12-16 15:24:29 发布

阅读量1.1k

点赞数 1

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Czc1357618897/article/details/125217398

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js定时器切换图片

思路

利用数组存储每个图片url地址
给按钮设置单击响应函数，在单击响应函数之中设置定时器，让图片自己切换
需要注意的是定时器中图片不能超过数组的最大索引，当到大最大索引时候需要设置到从第一张图片重新开始
在每个定时器开始前需要关闭上一个定时器，否则多次点击按钮会开启多个定时器，但停止按钮只会关闭最后一个开启的定时器，即无法停止，所以最好的便是在开启下一个定时器前关闭上一个定时器

代码

<!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>
  <style>
    img {
      width: 360px;
      height: 225px;
    }
  </style>
  <script>
    window.onload = function ()
    {
      //获取图片元素
      var img1 = document.getElementById("img1");
      //获取开启和停止按钮元素
      var btn01 = document.getElementById("btn01");
      var btn02 = document.getElementById("btn02");
      //将图片的地址存储在imgArr数组中
      var imgArr = ["game1.jpg", "game2.jpg", "game3.jpg", "game4.jpg", "game5.jpg"];
      //定义一个变量来保存数组中照片的索引
      var index = 0;
      //定义定时器标识
      var timer;
      //设置开启的单击响应函数
      btn01.onclick = function ()
      {
        //在每次开启前结束上一个定时器，为保证只存在一个定时器，避免多次点击开始创造多个定时器
        clearInterval(timer);
        //设置定时器
        timer = setInterval(function ()
        {
          //修改照片路径
          index++;
          //判断索引是否大于数组最大元素了
          //index = 5 时候  5 % 5 = 0; 又从新开始 
          index = index % imgArr.length;
          img1.src = imgArr[index];

        }, 1000)
      };
      //设置停止按钮的单击响应函数
      btn02.onclick = function(){
        //关闭定时器
        clearInterval(timer);
      };
    };
  </script>
</head>

<body>
  <img src="game1.jpg" alt="" id="img1">
  <br>
  <button id="btn01">开启</button>
  <button id="btn02">停止</button>
</body>

</html>