JS实现图片切换练习

最新推荐文章于 2021-09-27 17:05:31 发布

静颍流年

最新推荐文章于 2021-09-27 17:05:31 发布

阅读量478

点赞数

文章标签： js实现图片切换联系

本文链接：https://blog.csdn.net/weixin_43571052/article/details/88418848

版权

效果图

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>练习</title>
        <style type="text/css">
        /* /*已知宽高的垂直水平居中方案*/
      /*   #img1{
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            width: 500px;
            height: 330px;
        }  */ 
        </style>
        <script type="text/javascript">
        window.onload = function(){
            var img1 = document.getElementById("img1");
        var imgArr = ["img/1.jpg", "img/2.jpg","img/3.jpg", "img/4.jpg", "img/5.jpg" ];
        //创建一个变量，用来保存当前图片的索引
        var index  = 0;
        var timer;
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function(){
            //开启定时器之前，需要将当前元素的其他定时器关闭
            clearInterval(timer);
          timer =  setInterval(function(){
            index++;
            //判断是否超过最大索引
            index %= imgArr.length;
            img1.src = imgArr[index];
        } ,1000); 
        }
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function(){
            clearInterval(timer);
        }
        }
        </script>
    </head>
    <body>
        <img id="img1" src="img/1.jpg"/>
        <br/>
        <button id="btn01">开始</button>
        <button id="btn02">结束</button>
    </body>
</html>

知识点

setInterval（）定时调用

参数

1.回调函数，该函数每隔一段时间被调用一次。

2.每一次调用间隔的时间，单位是毫秒。

返回值：返回一个Number类型的数据

这个数字用来作为定时器的唯一标识。

clearInterval（）可以用来关闭一个定时器，需要一个定时器的标识作为参数。

可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器，如果参数不是一个有效的标识，则什么也不做。