JavaScript笔记49_自动切换图片（使用定时器）

最新推荐文章于 2022-06-10 10:53:33 发布

qqq777_

最新推荐文章于 2022-06-10 10:53:33 发布

阅读量162

点赞数

分类专栏：前端html笔记文章标签： javascript

本文链接：https://blog.csdn.net/qqq777_/article/details/114641055

版权

前端html笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
    </style>
    <script>
       window.onload=function(){    
            //图片自动切换
            var img1=document.getElementById("img1");
            //创建一个数组来保存图片的路径
            var imgArr=["images/icons.png","images/logo.png","images/wx_cz.jpg"];
            var index=0;
            //定义一个变量，保存定时器的标识
            var timer;
            //定时器，切换图片
            // setInterval(function(){
            //     //索引自增
            //     index++;
            //     //修改imag1的src属性
            //     img1.src=imgArr[index%3];
            // },1000);
            var bnt01=document.getElementById("btn01");
            //开始按钮后切换
            bnt01.onclick=function(){
                //开启定时器前，先关闭上一个定时器
                clearInterval(timer);
                
                timer=setInterval(function(){
                //索引自增
                    index++;
                //修改imag1的src属性
                    img1.src=imgArr[index%3];
                },1000);
            };
            //停止自动切换
            var btn02=document.getElementById("btn02")
            btn02.onclick=function(){
                //关闭定时器

                //clearinterval()可以接收任意参数
                //如果参数是一个有效的定时器标识，则停止对应的定时器
                //如果参数不是一个有效的标识，则什么也不做
                clearInterval(timer);
            };
       };
    </script>
</head>
<body>
    <img id="img1" src="images/icons.png" alt="">
    <br>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>
</html>

qqq777_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记49_自动切换图片（使用定时器）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style&gt
复制链接

扫一扫

专栏目录