简单前端知识——jQuery的学习和定时器——03

最新推荐文章于 2021-03-07 20:02:24 发布

原创最新推荐文章于 2021-03-07 20:02:24 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

简单前端知识专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用jQuery进行图片显示和隐藏的示例，并演示了如何使用定时器来自动控制图片的显示与隐藏。通过简单的按钮点击事件触发图片状态的变化，同时利用setTimeout函数实现定时效果。

jQuery的函数和事件的学习可以通过jQuery手册速查表来进行

jquery的图片隐藏和现实

<script>
    $(function(){
        $("#btn2").click(function(){
            $("#img1").hide();
        });
        ------------------------------------
         $("#btn1").click(function(){
            $("#img1").show();
        });
    });
</script>
</head>
<body>
    <input type="button" value="显示" id="btn1" />
    <input type="button" value="隐藏" id="btn2" />
    <img src="../../img/picture.png" id="img1">
</body>

定时器的使用

<script>
    function showAd(){
        $("#img1").slideDown();
        setTimeout("hideAd()",3000);
    }
    function hideAd(){
        $("#img1").slideup();
    }
    
    
    $(function(){
        setTimeout("showAd()",3000)
    });
</script>
</head>
<body>
    
    <img src="../../img/picture.png" id="img1" id="img1" style="display:none" />
</body>