案例2_轮播图与BOM_Window_属性

案例2_轮播图

     分析:
1.在页面上使用img标签展示图片
2.定义一个方法,修改图片对象的src属性
3.定义个定时器,每3秒调用方法一次
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <img id="img" width="600px " height="300px" src="img/img01.png">

    <script>
        /*
        *     分析:
        *        1.在页面上使用img标签展示图片
        *        2.定义一个方法,修改图片对象的src属性
        *        3.定义个定时器,每3秒调用方法一次
        */

        //修改图片
         var number = 1;
         function  fun(){
             number++;
             //判断是否大于2
             if (number>2){
                 number = 1;
             }
             //获取img对象
             var img = document.getElementById("img");
             img.src ="img/img0"+number+".png";
         }
             //定义定时器
            setInterval(fun,3000);
    </script>
</body>
</html>
复制代码

 

效果:过了3秒后切换图片

BOM_Window_属性

   

属性:

1.获取其他对象
history
location
Navigator
Screen
2.获取DOM对象
document

复制代码
 /*  //获取history
        var h1 = window.history;
        var h2 = history;

        alert(h1);
        alert(h2);
*/
        var openBtn = window.document.getElementById("openBtn");
        alert(openBtn);

        document.getElementById("")
复制代码

 

    

posted @   zj勇敢飞,xx永相随  阅读(19)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示