JS基础-定时器-切换图片练习-尚硅谷-P128

2022-01-30 18:01:58 阅读：152 来源： 互联网

标签：index 定时器 img timer P128 var img1 JS

视频链接：
链接

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#img1{
			width: 500px;
			height: 300px;
			
		}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				/**
				 * 使图片可以自动切换
				 */
				//获取img标签
				var img1=document.getElementById("img1");
				//创建一个数组，保存图片路径
				var imgArr=["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg"];
				//创建一个变量保存索引
				var index=0;
				//为按钮绑定一单击响应函数
				var timer;
				var btn01=document.getElementById("btn");
				btn01.onclick=function(){
					/**
					 * 目前 我们每点击一个按钮就开一个定时器
					 * 点击多个按钮就开启多个定时器，这就导致图片切换速度过快
					 * 并且只能关闭最后一次关闭的定时器
					 * 根本停不下来
					 */
					/**
					 * 在开启定时器之前 应该关掉上一个定时器
					 */
					clearInterval(timer);
					timer=setInterval(function(){
						//使索引自增		
						index++;
						//判断索引是否超过最大索引
						// if(index>=imgArr.length){
						// 	index=0;
						// }
						//或者这么写
						index = index % imgArr.length;
						//修改img1的src属性
						img1.src=imgArr[index];
					},1000);
				}
				var btn02=document.getElementById("btn02");
				btn02.onclick=function(){
					/**
					 * clearInterval()可以接受任意参数
					 * 如果参数是一个有效的定时器标识，则停止对应的定时器
					 * 如果参数不是一个有效的定时器，则什么也不做
					 */
					clearInterval(timer);
				}
				
			}
		</script>
	</head>
	<body>
		<img src="./img/1.jpg"   id="img1"/>
		<br />
		<br />
		<button id="btn">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>

标签：index,定时器,img,timer,P128,var,img1,JS
来源： https://blog.csdn.net/qq_43624193/article/details/122754519

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS基础-定时器-切换图片练习-尚硅谷-P128