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

最新推荐文章于 2022-09-11 15:05:02 发布

馬冬梅啊

最新推荐文章于 2022-09-11 15:05:02 发布

阅读量686

点赞数

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

本文链接：https://blog.csdn.net/weixin_39782583/article/details/84026978

版权

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

摘要由CSDN通过智能技术生成

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>