事件(onload)
*注意点：
- 变量加var局部变量，不加var全局变量
- setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
返回值：返回一个 ID（数字），可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行
- style="display:none" （隐藏元素）
●display:none和visible:hidden都能把网页上某个元素隐藏起来。
但两者有区别:
●display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
●visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
（参考）https://zhidao.baidu.com/question/569829578.html
- style="display:block" （显示元素）
- 不支持绑定多个事件，不要那么做！
步骤分析：
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
代码实现
JS部分
<script>
function init() {
// //案例二：书写轮播图片显示的定时操作(3秒)
// window.setInterval("changeImg()", 3000); //window可以省略不写 //案例三：1.设置显示广告图片的定时操作
//这里不能加var:加var局部变量，不加var全局变量
time=setInterval("showAd()", 3000);
} //书写函数
var i = 0;
function changeImg() {
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src = "../img/" + i + ".jpg";
if (i == 2) {
i = 0;
}
} //2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片位置
var adEle=document.getElementById("img2");
//4.修改元素里面的属性让其显示
adEle.style.display="block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time=setInterval("hiddenAd()",3000); }
//7.书写隐藏图片的函数
function hiddenAd(){
//8.获取图片位置并设置style属性的display值为none
document.getElementById("img2").style.display="none";
//9.清除隐藏图片的定时操作
clearInterval(time);
} </script>
html部分
<body onload="init()">
<!--定时弹出广告图片位置-->
<!--display:none 隐藏元素-->
<img src="../img/middle01.jpg" width="100%" style="display:none" id="img2"/>
结果：