JS入门案例2

图片的切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮转</title>
	<script>
	/* 1.点击事件onclick
	2.事件和触发函数changimg
	3.在函数中*/
		function changimg(){
			//alert("即将切换图片");
			var img=document.getElementById("img1")
			img.src="img/8c710890266d442c81de40b47a401995_th.gif";	
		}
	</script>
</head>

<body>
	<input type="button" value="点击切换图片" onClick="changimg()"><br>
	<img src="img/590991_074819014553_2.jpg" alt="" id="img1">
</body>
</html>

一打开网页显示这样子的

当我点击切换图片时网页的图片发生改变

实现幻灯片的JS技术

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 确定事件: 文档加载完成的事件 onload
			2. 事件要触发 : init()
			3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
			   1. 开启定时器: 执行切换图片的函数 changeImg()
			4.  changeImg()
			   1. 获得要切换图片的那个元素
		-->
		<script>
			var index = 0;
			
			function changeImg(){
				
				//1. 获得要切换图片的那个元素
				var img = document.getElementById("img1");
				
				//计算出当前要切换到第几张图片
				var curIndex = index%3 + 1;  //0,1,2 
				img.src="image/"+curIndex+"1.jpg";  //1,2,3
				//每切换完,索引加1
				index = index + 1;
			}
			
			function init(){
				
				setInterval("changeImg()",1000);
			}
			
		</script>
	</head>
	<body onload="init()">
		<img src="image/1c799c7537e04da69e37f690104233a3_th.jpg" alt="" id="img1"/>
	</body>
</html>

不知道为什么运行无法切换找不到原因代码是对的........无奈

定时器技术

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定时器</title>
<script>
	//window是最顶层的对象
	//window.setInterval("alert('123');",1000);
	function test(){
		console.log("setInterval 调用了");
	}
	//setInterval("test()",1000);
	//setTimeout("test()",1000);
	var timeID;
	function startdingshiqi(){
		timeID=setInterval("test()",1000);
	}
	function stopdingshiqi(){
		clearInterval(timeID);
	}
	</script>
</head>

<body>
	<input type="button" value="开始定时器" onClick="startdingshiqi()"><br>
	<input type="button" value="取消定时器" onClick="stopdingshiqi()">
</body>
</html>

点击开始定时的时候控制台的会输出 setInterval 调用了我等到运行了42次才停止运行

定时弹出图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 确定事件: 页面加载完成的事件 onload
			2. 事件要触发函数:  init()
			3. init函数里面做一件事: 
			   1. 启动一个定时器 : setTimeout() 
			   2. 显示一个广告
			      1. 再去开启一个定时5秒钟之后,关闭广告
		-->
		
		<script>
		
			function init(){
				setTimeout("showAD()",3000);
			}
			
			function showAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//显示广告
				img.style.display = "block";
				
				//再开启定时器,关闭广告
				setTimeout("hideAD()",3000);
			}
			
			function hideAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//隐藏广告
				img.style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img id="img1" src="img/t01950208c8da4b8a78.jpg" width="100%" style="display: none;"/>
	</body>
</html>

运用定时器规定时间弹出图片

图片在网页显示和隐藏

网页设置默认没有图片显示

当点击显示按钮时出现图片

图片的切换

实现幻灯片的JS技术

定时器技术

定时弹出图片

图片在网页显示和隐藏

猜你喜欢