1、需求分析
在首页的顶部做一个定时弹出与关闭广告图片的效果
2、步骤分析
第一步:在页面指定位置隐藏一个广告图片(使用display属性的none值)
第二步:确定事件(onload)并为其绑定一个函数
第三步、书写绑定的函数(设置一个显示图片的定时操作)
第四步:书写定时器中的函数(获取广告图片的位置并设置属性style的display值为block)
第五步:清除显示图片的定时操作
第六步:书写隐藏图片的定时操作(同三)
第七步:书写定时器中的函数(获取广告图片的位置并设置属性style的display值为none)
第八步:清除隐藏图片的定时操作
3、代码实现:
JS代码:
<script>
function init(){
//1、设置显示广告图片的定时操作
time = setInterval("showAd()",3000);
}
//2、书写显示广告图片的函数
function showAd(){
//3、获得广告图片的位置
var adEle = document.getElementById("adImg");
//4、修改属性为block,让其显示
adEle.style.display = "block";
//5、清除显示图片的操作
clearInterval(time);
//6、设置隐藏图片的定时操作(同1)
time = setInterval("hideAd()",3000);
}
//7、书写隐藏广告图片的函数(同2)
function hideAd(){
//8、获取广告图片的位置并修改其属性为none,让其隐藏(同3、4的简写)
document.getElementById("adImg").style.display = "none";
//9、清除隐藏图片的定时操作(同5)
clearInterval(time);
}
</script>
html代码:
<body onload="init()">
<!--定时弹出广告图片位置-->
<img src="img/addImg.png" width="100%" style="diaplay:none" id="addImg">