1、北大青鸟中关村使用 JQ 完成页面定时弹出广告1、JQuery 效果2、步骤分析：第一步：引入 jQuery 相关的文件第二步：书写页面加载函数第三步：在页面加载函数中，获取显示广告图片的元素。第四步：设置定时操作(显示广告图片的函数 )第五步：在显示广告图片的函数中，使用 jQuery 的方法让广告图片显示(show()第六步：清除显示广告图片的定时操作第七步：设置定时操作(隐藏广告图片的函数 )第八步：在隐藏广告图片的函数中，使用 jQuery 的方法让广告图片隐藏(hide()第九步：清除隐藏广告图片的定时操作1 2 3 $(function()4 /1.书写显示广告图片的定时操作5 t
2、ime=setInterval(“showAd()“,3000);北大青鸟中关村6 );7 8 /2.书写显示图片的函数9 function showAd()10 /3.获取广告图片，并让其显示11 /$(“#img_2“).show(1000);12 $(“#img_2“).slideDown(3000); /滑入13 14 /4.清除显示图片的定时操作15 clearInterval(time);16 /5.设置隐藏图片的定时操作17 time=setInterval(“hiddenAd()“,3000);18 19 20 function hiddenAd()21 /6.获取广告图片让其
3、隐藏22 /$(“#img_2“).hide();23 $(“#img_2“).slideUp(3000); /滑出24 /7.清除隐藏图片的定时操作25 clearInterval(time);26 27 3、最终实现代码：1 2 3 4 5 首页6 7 #father8 border: 0px solid black;9 width: 1300px;10 height: 1600px;11 margin: auto;12 13 #logo14 border: 0px solid black;15 width: 1300px;16 height: 50px;17 18 .top北大青鸟中关村
4、19 border: 0px solid blue;20 width: 431px;21 height: 50px;22 float: left;23 24 #top25 padding-top: 12px;26 height: 38px;27 28 29 #menu30 border: 0px solid red;31 width:1300px;32 height: 50px;33 background: black;34 margin-bottom: 10px;35 36 ul li37 display: inline;38 color: white;39 40 #product41 bo
5、rder: 0px solid goldenrod;42 width: 1300px;43 height: 550px;44 45 #product_top46 border: 0px solid blue;47 width: 100%;48 height: 43px;49 padding-top: 5px;50 51 #product_bottom52 border: 0px solid green;53 width: 100%;54 height: 498px;55 56 57 #product_bottom_left58 border: 0px solid red;59 width: 2
6、00px;60 height: 498px;61 float: left;62 北大青鸟中关村63 #product_bottom_right64 border: 0px solid saddlebrown;65 width: 1094px;66 height: 498px;67 float: left;68 69 #big70 border: 0px solid hotpink;71 width: 545px;72 height: 247px;73 float: left;74 75 .small76 border: 0px solid blue;77 width: 180px;78 hei
7、ght: 247px;79 float: left;80 /*让里面的内容居中*/81 text-align: center;82 83 #bottom84 text-align: center;85 86 /*去掉超链接的下划线*/87 a88 text-decoration: none;89 90 91 92 93 94 $(function()95 /1.书写显示广告图片的定时操作96 time=setInterval(“showAd()“,3000);97 );98 99 /2.书写显示图片的函数100 function showAd()101 /3.获取广告图片，并让其显示102 /
8、$(“#img_2“).show(1000);103 $(“#img_2“).slideDown(3000); /滑动104 105 /4.清除显示图片的定时操作北大青鸟中关村106 clearInterval(time);107 /5.设置隐藏图片的定时操作108 time=setInterval(“hiddenAd()“,3000);109 110 111 function hiddenAd()112 /6.获取广告图片让其隐藏113 /$(“#img_2“).hide();114 $(“#img_2“).slideUp(3000);115 /7.清除隐藏图片的定时操作116 clearI
9、nterval(time);117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 登录135 注册136 购物车137 138 139 140 141 142 143 首页144 手机数码145 家用电器北大青鸟中关村146 鞋靴箱包147 148 149 150 151 152 153 154 155 156 157 158 159 最新商品160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 榨汁机177 599178
10、179 180 北大青鸟中关村181 电视机182 1599183 184 185 186 锅187 399188 189 190 191 面包机192 799193 194 195 196 咖啡机197 899198 199 200 201 洗衣机202 999203 204 205 206 扫地机器人207 1599208 209 210 211 微波炉北大青鸟中关村212 1099213 214 215 216 压力锅217 799218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 关于我们236 联系我们237 招贤纳士238 法律声明239 友情链接240 支付方式241 配送方式242 服务声明243 广告声明244 245 Copyright 2005-2016 hh 商城 版权所有 246 247 248 249 250
