JavaScript,利用定时器实现图片的切换

脚踏实地，坚持不懈!

于 2022-08-22 23:27:15 发布

阅读量811

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_43228946/article/details/126475610

版权

JavaScript,利用定时器实现图片的切换
代码如下：

<!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>案例055</title>
                  <style>
                                    body{
                                                      background-color: aqua;
                                    }
                                   
                                    img{
                                                      margin-left: 360px;
                                    }

                                    #btn01{
                                                      margin-left: 950px;        
                                    }
                  </style>
                  <script>
                                    window.onload = function(){
                                                      var btn01 = document.getElementById("btn01");
                                                      var btn02 = document.getElementById("btn02");
                                                      var img = document.getElementById("pic");
                                                      var imgArr = ["./picture/1.jpg","./picture/2.jpg","./picture/3.jpg","./picture/4.jpg"];
                                                      var timer = null;
                                                      var count = 0;
                                                      /*
                                                         单击按钮在定时器里面实现切换图片的功能
                                                      */
                                                      btn01.onclick = function(){
                                                                        clearInterval(timer);
                                                                        timer = setInterval(function(){
                                                                                          count++;
                                                                                          count%=imgArr.length;
                                                                                          img.src = imgArr[count];
                                                                        },1000)
                                                      };
                                                      /*
                                                         点击该按钮就会停止切换的活动
                                                      */
                                                      btn02.onclick = function(){
                                                                        clearInterval(timer);
                                                      }
                                    }
                  </script>
</head>
<body>
                  <br></br>
                  <img src="./picture/1.jpg" alt="图片" id="pic"/>
                  <br></br>
                  <button id="btn01">开始</button>
                  <button id="btn02">停止</button>
                  
</body>
</html>