jquery实现网站首页的广告定时弹出和隐藏,这是每个网站常见功能
上一次做了一个购物网站首页的广告弹出和隐藏,他是纯js操作,纯js操作的结果就是代码很多,现在用jquery的方式实现,二者思想一致,但是代码量jquery更加的简洁,下面给出jquery的代码。
<script type="text/javascript">
var time;
$(function(){
time=setInterval("showAd()",3000);
});
function showAd(){
$("#img1").show(3000);
clearInterval(time);
time=setInterval("hidAd()",5000);
}
function hidAd(){
$("#img1").hide();
clearInterval(time);
}
</script>
</head>
<body >
<div id="father">
<img src="../img/1.jpg" width="100%" style="display:none" id="img1"/>
这个思想和纯js是一致的,页面加载之后$(function(){..})就定时执行 (time=setInterval("showAd()",3000);)showAd方法,showAd方法中, $("#img1").show(3000);的意思是广告位在3秒内缓慢的显示,然后取消定时执行,然后定时执行hide方法,这个方法是隐藏$("#img1").hide(),然后取消自动隐藏方法clearInterval(time);就结束了
这个广告出来使用的是$("#img1").show(3000);,这个广告消失使用的是$("#img1").hide();,这是基本的消失和出现,还有其它的有特色的效果,比如
$("#img1").slideDown(5000)向下缓慢划出来
$("#img1").slideUp(5000)向上缓慢划没
$("#img1").fadeIn(5000)淡入
$("#img1").slideOut(5000)淡出
$("#img1").toggle()如果当前元素为隐藏,那么可以这个语句的效果是显示,如果当前元素为显示,那么这个语句的效果的隐藏
隐藏就可以理解为所隐藏所对应的代码被删掉一样,没有任何效果