JQuery的图片自动显示和隐藏

最新推荐文章于 2021-12-29 20:58:09 发布

哔哩哔哩 - ( ゜- ゜)つロ乾杯

最新推荐文章于 2021-12-29 20:58:09 发布

阅读量261

点赞数 2

分类专栏：笔记文章标签： js jquery

本文链接：https://blog.csdn.net/drankness/article/details/119116666

版权

笔记专栏收录该内容

44 篇文章 1 订阅

订阅专栏

主要使用定时器方法.setTimeout(函数方法,延迟时间)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{width:100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //使用定时器来完成,setTImeout(执行一次的定时器)
        $(function (){
        	//展示动画函数
            function addShow(){
                $("#ad").show("slow");
            }
            //隐藏动画函数
            function  adHide(){
                $("#ad").hidden("slow");
            }
            //定时器
            setTimeout(addShow,3000);
            setTimeout(adHide,8000);
        })
    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>