利用jQuery实现页面定时弹出广告的效果

1.JQuery效应

2.步骤分析：

第一步：介绍jQuery相关文件

第二步：编写页面加载功能

第三步：在页面加载功能中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片功能)

第五步：在显示广告图片功能中，使用jQuery方法显示广告图片(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片功能)

第八步：在隐藏广告图片功能中，使用jQuery隐藏广告图片(hide())

第九步：清除隐藏广告图片的定时操作

脚本类型=' text/JavaScript ' src=' http :/js/jquery-1 . 8 . 3 . js '/script script $(function(){//1。写和显示广告图片的定时操作时间=设置间隔(' showad()'，3000)；});//2.编写显示图片的函数show ad(){//3。获取广告图片并显示//$('#img_2 ')。show(1000)；$('#img_2 ')。slide down(3000)；//滑入//4。清除显示图片的定时操作clearInterval(时间)；//5.设置隐藏图片的定时操作时间=setinterval ('hidden ad()'，3000)；}函数hiddenAd(){ //6。获取广告图片将其隐藏//$('#img_2 ')。hide()；$('#img_2 ')。slide up(3000)；//滑出//7。清除隐藏图片的清除间隔(时间)；} /script3，最终实现代码：

！doctype html html head meta charset=' utf-8 ' title主页/title style #父亲{边框： 0px纯黑；宽度： 1300 px；高度： 1600 px；margin: auto} #徽标{ border: 0px纯黑；宽度： 1300 px；高度： 50px；} .top{ border: 0px纯蓝；宽度： 431 px；高度： 50px；向左浮动：} # top { padding-top : 12px；height: 38px} #菜单{ border: 0px纯红；宽度width:1300px高度： 50px；背景：黑色；边距-bottom : 10px；} ul li { display: inlinecolor:白色；} #产品{ border: 0px固体一枝黄花；宽度： 1300 px；高度： 550 px；} #product_top{ border: 0px纯蓝；宽度： 100%；height: 43px衬垫-top : 5px；} #产品_底部{ border: 0