图片切换定时器

最新推荐文章于 2023-05-18 20:23:20 发布

ZzyUHan

最新推荐文章于 2023-05-18 20:23:20 发布

阅读量583

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/ZzyUHan/article/details/81431291

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function (){
				var mg = document.getElementById("mg");
				var btn01 = document.getElementById("btn01");
				var btn02 = document.getElementById("btn02");
				var mgs = ["img/timg.png","img/timg-(1).png","img/timg-(2).png","img/timg-(3).png","img/timg-(4).png","img/timg-(5).png","img/timg-(6).png"];
				var index = 0;
				var timer;
				btn01.onclick = function (){
					//开启定时器来切换图片
					//点击一次按钮就会开启一个定时器
					//所以在开启定时器之前关闭当前元素的其他定时器
					clearInterval(timer);
					timer = setInterval(function(){
					 	//索引自增
					 	index ++;
					 	//判断索引是否超过最大值
					 	if(index >= mgs.length){
					 		//超过则设置为0
					 		index = 0;
					 	}
					 	//index = index % mgs.length;
					 	//index %= mgs.length;
					 	//修改mg的src属性
					 	mg.src = mgs[index];
					 },1000);
				};
				//设置按钮来关闭定时器
				btn02.onclick = function (){
					clearInterval(timer);
				};
			};
 		</script>
	</head>
	<body>
		<img id="mg" src="img/timg.png" />
		<button id="btn01">开始</button>
		<button id="btn02">暂停</button>
	</body>
</html>