轮播图练习js

最新推荐文章于 2023-12-24 14:19:26 发布

北冥烟雨

最新推荐文章于 2023-12-24 14:19:26 发布

阅读量59

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45423800/article/details/118243304

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<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>
        /* 清除默认边距 */
        *{
            margin:0;
            padding:0;
        } 
 
    </style>
   <script type="text/javascript">
    window.onload=function(){
        //获取img1标签
        var img1=document.getElementById("img1");

        //创建一个数组保存图片
        var imgArr=["img/11.jpg","img/22.jpg","img/33.jpg","img/44.jpg"];

        //保存图片索引
        var index = 0;

        //定义一个变量用来保存定时器标识
        var timer;

        /* 获取开始按钮对象 */
        var start=document.getElementById("start");
        //为开始绑定单击响应函数
        start.onclick=function(){
            //开启定时器之前关闭上一个定时器
            clearInterval(timer);
            //开启定时器
            timer=setInterval(function(){
                index++;
                index %= imgArr.length;
                img1.src = imgArr[index];
            },1000);
        };
        //关闭定时器
        var stop=document.getElementById("stop");
        stop.onclick=function(){
            clearInterval(timer);
        }
    
        
    };
    </script> 
        
</head>
<body>
    
    <div id="outer">
        <p id="info"></p>

        <img  id="img1" src="img/11.jpg"  alt="崩坏三"/>
        
        <button id="start">开始</button>
        <button id="stop">暂停</button>
    </div>
         
</body>
</html>

北冥烟雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图练习js

<!DOCTYPE html><html lang="zh"><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>Do.
复制链接

扫一扫

专栏目录