tml代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页的顶端海报弹框操作</title> </head> <body> <div id="ad" style="100%;display: none;"> <img src="img/banner1.jpg" width="100%" /> </div> </body> </html>
JavaScript代码如下:
<script type="text/javascript"> //记录次数 var i=0; //定时器id var timer; onload=function(){ //设置定时器 间隔4秒后展示图片 timer=setInterval(showAd,4000); } //展示广告方法 展示2秒之后隐藏 function showAd(){ //展示的次数加1 i++; //若i=3 清空由setinterval设置的定时器 if(i==3){ clearInterval(timer); } //1.获取广告 var divObj=document.getElementById("ad"); //2.修改广告的样式 将其显示 divObj.style.display="block"; //3.2秒之后隐藏 只执行一次 setTimeout(hideAd,2000); } //隐藏广告 function hideAd(){ //1.获取广告 var divObj=document.getElementById("ad"); //2.修改样式 将其隐藏 divObj.style.display="none"; } </script>
图片素材: banner1
作者: 杨校
出处: http://www.cnblogs.com/xiaoxiao5016
分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。