需求:页面加载后几秒钟,显示一个广告弹出框,显示完设置的时间后自动隐藏。
* 第一步:在页面指定位置隐藏一个广告图片(使用display属性中的none)
* 第二步:确定时间onload()并绑定一个函数
* 第三步:书写这个函数(设置一个显示图片的定时操作)
* 第四步:书写定时器中的函数(将指定位置的隐藏图片的style属性中的display值设置为block)
* 第五步:清除图片的定时操作
* 第六步:书写隐藏图片的操作
* 第七步:书写定时器中的函数(将指定位置的图片的display设置为none)
* 第八步:清除隐藏图片的定时操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 0px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
/*#logo{
border: 0px solid black;
width: 1300px;
height: 50px;
}*/
.top{
border: 0px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 0px solid red;
width: 1300px;
height: 50px;
background-color: black;
margin-bottom: 10px;
}
ul li{
display: inline;
color: white;
}
#clear{
clear: both;
}
#product{
border: 0px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 0px solid blue;
width: 100%;
height: 45px;
padding-top: 8px;
}
#product_bottom{
border: 0px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 0px solid red;
width: 200px;
height: 500px;
float: left;
}
#product_bottom_right{
border: 0px solid blue;
width: 1094px;
height: 500px;
float: left;
}
#big{
border: 0px solid red;
width: 544px;
height: 248px;
float: left;
}
.small{
border: 0px solid blue;
width: 180px;
height: 248px;
float: left;
/*让里面的内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
a{
text-decoration: none;
}
</style>
<!--<script type="text/javascript">
/** 案例一
* 图片轮播实现
* 1、确定所要使用的事件 onload()
* 2、事件里面指定触发函数 init();
* 3、书写函数,设置定时,以及所要循环的函数
* 4、编写轮播切换图片函数
<!--*
*/
/**案例三
* 广告弹窗的定时弹出与清除
* 需求:页面加载后几秒钟,显示一个广告弹出框,显示完设置的时间后自动隐藏。用户也可在弹窗以出现就点击关闭
* 第一步:在页面指定位置隐藏一个广告图片(使用display属性中的none)
* 第二步:确定时间onload()并绑定一个函数
* 第三步:书写这个函数(设置一个显示图片的定时操作)
* 第四步:书写定时器中的函数(将指定位置的隐藏图片的style属性中的display值设置为block)
* 第五步:清除图片的定时操作
* 第六步:书写隐藏图片的操作
* 第七步:书写定时器中的函数(将指定位置的图片的display设置为none)
* 第八步:清除隐藏图片的定时操作。
*
*/
//3、轮播图的定时函数操作
var i=1;
function init(){
window.setInterval("changeImg()",2000);
//设置广告图片的定时操作
time =window.setInterval("ShowAd()",3000);
}
//4、轮播函数切换图片
var i=0;
function changeImg(){
i++;
document.getElementById("img1").src="../img/"+i+".jpg"
if(i==3){
i=0
}
}
//编写显示广告图片的函数
function ShowAd(){
//修改之前图片隐藏为经历指定时间段以后显示图片
var adEle=document.getElementById("img2");
adEle.style.display="block";
//清除显示图片的操作
window.clearInterval(time);
//书写隐藏图片的操作
time= window.setInterval("hiddenAd()",3000);
}
function hiddenAd(){
document.getElementById("img2").style.display="none";
clearInterval(time)
}
</script>
-->
<script type="text/javascript" src="../js/轮播图片.js"></script>
</head>
<body onload="init()">
<div id="father">
<!-- 定时弹出广告的图片的位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display:none" id="img2" />
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px"/>
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear">
</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: 20px;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>孕婴保健</li></a>
<a href="#"><li>奢侈品</li></a>
</ul>
</div>
<!--3.轮播图部分-->
<div id="" >
<img src="../img/1.jpg" width="100%" id="img1"/>
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%" />
</div>
<!--6.热门商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">热门商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color: gray;">电炖锅</p></a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--8.友情链接和版权信息-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 版权所有
</p>
</div>
</div>
</body>
</html>
经过3秒以后,图片消失。