（叁）JS自动切换图片

最新推荐文章于 2020-05-19 23:53:20 发布

Cherry_King

最新推荐文章于 2020-05-19 23:53:20 发布

阅读量423

点赞数 1

分类专栏： JS&JQuery 文章标签： JS自动切换图片

本文链接：https://blog.csdn.net/Cherry_King/article/details/99482892

版权

JS&JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

0.技术分析

主要完成两件事：

切换图片
计时去触发切换这个事件。

1.实现点击切换图片

目录文件如下：
在这里插入图片描述
index.jsp如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script>
		function changeImg(){
			var input1=document.getElementById("img1");
			img1.src="img/02.jpg";
		}
	</script>
</head>
<body>
		<input type="button" value="点击切换图片"onclick="changeImg()"/><br>
		<img src="img/01.jpg" id="img1"/>
</body>
</html>

访问效果：
点击效果：

2.设定计时器

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script>
		function test(){
			alert("3秒时间到！！");
		}
		var timerId;
		function startTimer(){
			//timerId=setTimerout("test()",3000 );
			timerId = setInterval("test()",3000 );
		}
		function stopTimer(){
			//clearTimeout(timerId);
			clearInterval(timerId);
		}
	</script>
</head>
<body>
		<input type="button" value="启动定时器" onclick="startTimer()"/><br>
		<input type="button" value="关闭定时器" onclick="stopTimer()"/><br>
		<img src="img/01.jpg" id="img1"/>
</body>
</html>

在这里插入图片描述
点击启动定时器，开始每个三秒弹出弹框。点击关闭定时器后关闭弹框计时。

3.自动播放图片

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="img/0"+curIndex+".jpg";  //1,2,3
				//每切换完,索引加1
				index = index + 1;
			}
			
			function init(){
				
				setInterval("changeImg()",1000);
			}
			
		</script>
	</head>
	<body onload="init()">
		<img src="img/01.jpg" width="100%" id="img1"/>
	</body>
</html>