1. 技术分析
获取元素: document.getElementById("xxx");
事件: onload事件
隐藏图片:display:none;
定时操作: setInterval("changeImg(), 3000");
2. 目标：
实现网页定时弹出广告， 并定时取消弹出的广告;
3. 步骤分析:
1). 在页面的指定位置隐藏一个广告图片(使用display属性的none值;);
2). 确定事件(onload)并为其绑定一个函数;
3). 书写定时任务(setInterval()), 设置一个显示图片的定时操作;
4). 书写定时任务里面的函数(获取广告图片的位置并设置属性style的display值为block);
5). 清除显示图片的定时操作
6). 书写隐藏图片的定时操作;
7). 书写定时器中的函数(获取广告图片的位置并设置属性style的display值为none;)
8). 清除隐藏图片的定时操作;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>#[{03-js实现首页轮播图-插入广告}]#</title>
<script>
<!--定义触发onload事件的函数-->
function init() {
//每隔固定时间， 去修改图片(changeImg()),
// setInterval默认时间单位为毫秒；
setInterval('changeImg()',1000);
//每隔1秒， 去显示广告;
//设置显示广告图片的定时操作,（在js里面，没有var，则变量为全局变量;）
displayTime=setInterval('showAd()',1000);
}
var i=1;
// 定义函数轮播图片
function changeImg() {
//每次触发事件，则i+1；实现下一张图片
i++;
//修改图片的链接为下一张图片
document.getElementById('img').src='img/img'+i+'.jpg';
// 6为轮播图片的总数， 如果i===6， 则重头轮播, 重置i为1;
if (i===6){
i=0
}
}
//定义函数显示广告
function showAd() {
//获取广告图片的显示属性并且修改；
document.getElementById('ad').style.display='block';
//清除显示广告的定时操作；
clearInterval(displayTime);
//设置隐藏图片的定时任务；
hidTime=setInterval('hidAd()',1500);
}
//定义函数隐藏广告（）
function hidAd() {
//获取广告图片的显示属性并且修改；
document.getElementById('ad').style.display='none';
//清除隐藏广告的定时操作；
clearInterval(hidTime)
}
</script>
</head>
<body onload="init()">
<div align="center">
<br>
<br>
<img src="img/img1.jpg" id="img">
</div>
<div align="center">
<img src="img/img7_ad.jpg" id="ad" style="display: none">
</div>
</body>
</html>