需求：页面加载后几秒钟，显示一个广告弹出框，显示完设置的时间后自动隐藏。用户也可在弹窗以出现就点击关闭 第一步：引入jQuery相关的文件 第二步：书写页面加载函数 第三步：在页面加载函数中，获取显示广告图片的元素。 第四步：设置定时操作(显示广告图片的函数) 第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show()) 第六步：清除显示广告图片的定时操作 第七步：设置定时操作(隐藏广告图片的函数) 第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide()) 第九步：清除隐藏广告图片的定时操作*/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <style> #father { border: 0px solid red; width: 1300px; height: 2170px; margin: auto; } /*#logo{ border: 0px solid black; width: 1300px; height: 50px; }*/ .top { border: 0px solid blue; width: 431px; height: 50px; float: left; } #top { padding-top: 12px; height: 38px; } #menu { border: 0px solid red; width: 1300px; height: 50px; background-color: black; margin-bottom: 10px; } ul li { display: inline; color: white; } #clear { clear: both; } #product { border: 0px solid red; width: 1300px; height: 558px; } #product_top { border: 0px solid blue; width: 100%; height: 45px; padding-top: 8px; } #product_bottom { border: 0px solid green; width: 100%; height: 500px; } #product_bottom_left { border: 0px solid red; width: 200px; height: 500px; float: left; } #product_bottom_right { border: 0px solid blue; width: 1094px; height: 500px; float: left; } #big { border: 0px solid red; width: 544px; height: 248px; float: left; } .small { border: 0px solid blue; width: 180px; height: 248px; float: left; /*让里面的内容居中*/ text-align: center; } #bottom { text-align: center; } a { text-decoration: none; } </style> <!--1、首先引入JQuery文件--> <script type="text/javascript" src="../../js/jquery-1.8.3.js"></script> <script> /*广告弹窗的定时弹出与清除 需求：页面加载后几秒钟，显示一个广告弹出框，显示完设置的时间后自动隐藏。用户也可在弹窗以出现就点击关闭 第一步：引入jQuery相关的文件 第二步：书写页面加载函数 第三步：在页面加载函数中，获取显示广告图片的元素。 第四步：设置定时操作(显示广告图片的函数) 第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show()) 第六步：清除显示广告图片的定时操作 第七步：设置定时操作(隐藏广告图片的函数) 第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide()) 第九步：清除隐藏广告图片的定时操作*/ //2、页面加载函数 $(function(){ //设置定时操作 time= setInterval("ShowAd()",3000); }); //获取广告图片的元素 function ShowAd(){ //在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show()) $("#img2").show(); //$("#img2").slideDown(5000); //清除定时操作 clearInterval(time); //设置隐藏图片的定时操作 time=setInterval("hiddend()",3000); } function hiddend(){ //获取广告图片，并让其隐藏 $("#img2").hide(); //$("#img2").slideUp(5000); //清除隐藏图片的定时操作 clearInterval(time); } </script> </head> <body onload="init()"> <div id="father"> <!-- 定时弹出广告的图片的位置--> <img src="../../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display:none" id="img2" /> <!--1.logo部分--> <div id="logo"> <div class="top"> <img src="../../img/logo2.png" height="46px" /> </div> <div class="top"> <img src="../../img/header.png" height="46px" /> </div> <div class="top" id="top"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <div id="clear"> </div> <!--2.导航栏部分--> <div id="menu"> <ul> <a href="#"> <li style="font-size: 20px;">首页</li> </a> <a href="#"> <li>手机数码</li> </a> <a href="#"> <li>家用电器</li> </a> <a href="#"> <li>鞋靴箱包</li> </a> <a href="#"> <li>孕婴保健</li> </a> <a href="#"> <li>奢侈品</li> </a> </ul> </div> <!--3.轮播图部分--> <div id=""> <img src="../../img/1.jpg" width="100%" id="img1" /> </div> <!--4.最新商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px;padding-top: 8px;">最新商品</span> <img src="../../img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="../../img/big01.jpg" width="100%" height="100%" /> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%" /></a> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> </div> </div> </div> <!--5.广告图片--> <div id=""> <img src="../../img/ad.jpg" width="100%" /> </div> <!--6.热门商品--> <div id="product"> <div id="product_top"> <span style="font-size: 25px;padding-top: 8px;">热门商品</span> <img src="../../img/title2.jpg" /> </div> <div id="product_bottom"> <div id="product_bottom_left"> <img src="../../img/big01.jpg" width="100%" height="100%" /> </div> <div id="product_bottom_right"> <div id="big"> <a href="#"><img src="../../img/middle01.jpg" width="100%" height="100%" /></a> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> <div class="small"> <img src="../../img/small03.jpg" /> <a href="#"> <p style="color: gray;">电炖锅</p> </a> <p style="color: red;">¥399</p> </div> </div> </div> </div> <!--7.广告图片--> <div id=""> <img src="../../img/footer.jpg" width="100%" /> </div> <!--8.友情链接和版权信息--> <div id="bottom"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <p> Copyright © 2005-2016 传智商城 版权所有 </p> </div> </div> </body> </html>效果：
