Day:2018/11/13
在网页上轮图片和弹出广告:
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例四的自己的实现</title>
<script>
function init(){
// 轮播图
setInterval("change()",3000);
// 广告图
time = setInterval("showAd()",3000);
}
var i = 0;
function change(){
i++;
document.getElementById("threeimg").src="../img/"+i+".jpg";
if(i == 3){
i = 0;
}
}
function showAd(){
document.getElementById("sevenImg2").style.display = "block";
clearInterval(time);
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
document.getElementById("sevenImg2").style.display = "none";
clearInterval(time);
}
</script>
</head>
<body onload="init()">
<table border="2px" width="100%" height="100%">
<!-- 第一行 -->
<tr>
<td colspan="2" width="33.33%"><img src="../img/logo2.png" width="50%"/></td>
<td colspan="2" width="33.33%"><img src="../img/header.png" ></td>
<td colspan="3" width="33.33%"> <a href="#">登陆</a> <a href="#">注册</a> <a href="#">购物车</a> </td>
</tr>
<!-- 第二行 -->
<tr bgcolor="black">
<td colspan="7">
<a href="#" ><font size="5" color="red">首页</font></a>
<a href="#"><font color="red">手机数码</font></a>
<a href="#">电脑办公</a> <a href="#">鞋靴箱包</a>
<a href="#">家用电器</a></td>
</tr>
<!-- 第三行 -->
<tr>
<td colspan="7" ><img src="../img/1.jpg" width="100%" id="threeimg"/></td>
</tr>
<!-- 第四行 -->
<tr>
<td colspan="7"><font size="5" color="red">最新商品 </font>
<img src="../img/title2.jpg"</td>
</tr>
<!-- 第五六行 -->
<tr>
<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%" /></td>
<td align="center">
<img src="../img/small03.jpg" align="center"/> <br />
<a href="#" ><font color="grey">炖锅</font></a> <br />
<font color="red" >$499</font>
</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
</tr>
<tr>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
</tr>
<!-- 第七行 -->
<tr>
<td colspan="7"><img src="../img/ad.jpg" width="100%" />
<img src="../img/jing.png" width="100%" style="display:none;" id="sevenImg2"</td>
</tr>
<!-- 第八行 -->
<tr>
<td colspan="7"><font size="5" color="red">热门商品 </font>
<img src="../img/title2.jpg"</td>
</tr>
<!-- 第九、十行 -->
<tr>
<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%" /></td>
<td align="center">
<img src="../img/small03.jpg" align="center"/> <br />
<a href="#" ><font color="grey">炖锅</font></a> <br />
<font color="red" >$499</font>
</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
</tr>
<tr>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
<td><img src="../img/small03.jpg"</td>
</tr>
<!-- 第十一行 -->
<tr>
<td colspan="7"><img src="../img/footer.jpg" width="100%"/></td>
</tr>
<!-- 第十二行 -->
<tr>
<td colspan="7" align="center">
<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> 南京邮电大学 版权所有</p>
</td>
</tr>
</table>
</body>
</html>