Web前端（三）JavaScript (2) 轮播图片+弹出广告

最新推荐文章于 2024-04-18 20:01:15 发布

馬冬梅啊

最新推荐文章于 2024-04-18 20:01:15 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端 Web前端文章标签： javaweb JavaScript css

本文链接：https://blog.youkuaiyun.com/weixin_39782583/article/details/84026978

Web前端同时被 2 个专栏收录

22 篇文章

订阅专栏

Web前端

22 篇文章

订阅专栏

这篇博客介绍了如何在网页中使用JavaScript实现轮播图片功能和弹出广告的效果，详细讲述了相关源代码和实现步骤。

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>  &nbsp; &nbsp; &nbsp;
				 <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>