案例广告自动显示与隐藏

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>广告的自动显示与隐藏</title>
 6     <style>
 7         #content{width:100%;height:500px;background:#999}
 8     </style>
 9 
10     <!--引入jquery-->
11     <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
12     <script>
13         /*
14             页面加载，3秒后显示图片，显示5秒后隐藏图片。
15          */
16         $(function () {
17             setTimeout(function () {
18                 //显示图片
19                 $("#ad").slideDown(200, "linear");
20                 //显示5s，之后隐藏图片
21                 setTimeout(function () {
22                     //隐藏图片
23                     $("#ad").slideUp(200, "swing");
24                 }, 5000);
25             }, 3000);
26         })
27     </script>
28 </head>
29 <body>
30 <!-- 整体的DIV -->
31 <div>
32     <!-- 广告DIV -->
33     <div id="ad" style="display: none;">
34         <img style="100%" src="../img/heima.png" />
35     </div>
36 
37     <!-- 下方正文部分 -->
38     <div id="content">
39         正文部分
40     </div>
41 </div>
42 </body>
43 </html>
广告自动显示与隐藏
案例 广告自动显示与隐藏

案例广告自动显示与隐藏
