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="width:100%" src="../img/heima.png" />
35 </div>
36
37 <!-- 下方正文部分 -->
38 <div id="content">
39 正文部分
40 </div>
41 </div>
42 </body>
43 </html>
