jquery实现网站首页的广告定时弹出和隐藏,这是每个网站常见功能

88463368 2018-03-16

上一次做了一个购物网站首页的广告弹出和隐藏,他是纯js操作,纯js操作的结果就是代码很多,现在用jquery的方式实现,二者思想一致,但是代码量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)淡出

jquery实现网站首页的广告定时弹出和隐藏,这是每个网站常见功能

$("#img1").toggle()如果当前元素为隐藏,那么可以这个语句的效果是显示,如果当前元素为显示,那么这个语句的效果的隐藏

隐藏就可以理解为所隐藏所对应的代码被删掉一样,没有任何效果

每天分享编程知识,欢迎关注

相关推荐