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>
