javascript学习之利用定时器实现图片的自动切换和关闭功能

最新推荐文章于 2022-12-16 15:24:29 发布

Ibelievesunshine

最新推荐文章于 2022-12-16 15:24:29 发布

阅读量4.2k

点赞数 3

分类专栏： javascript 文章标签： js定时器 setInterval clearInterval

文章版权归作者所有，请不要随意转载抄袭，情节严重，追究法律责任！！

本文链接：https://blog.youkuaiyun.com/Ibelievesunshine/article/details/80729326

版权

javascript 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个简单的网页应用，利用HTML、CSS与JavaScript实现了图片的自动切换及开始、停止控制功能。用户可以通过按钮操作来控制图片轮播效果，适用于初学者学习定时器与DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>通过定时器实现图片的自动切换和关闭效果</title>
	<style type="text/css">
		#pic{
			height:700px;
			width:433px;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function(){
			var timer;  //定义定时器变量
			var arrImg=["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg"];
			var btn01=document.getElementById("btn01");
			var btn02=document.getElementById("btn02");
			var pic=document.getElementById("pic");
			var index=0;  //定义索引变量，用来遍历图片
			btn01.οnclick=function(){
				clearInterval(timer);  //清除可能存在的上一个定时器
				timer=setInterval(function(){
					++index;
					index=index%arrImg.length;
					pic.src=index + ".jpg";
				},1000);
			};
			btn02.οnclick=function(){  //停止定时器
				clearInterval(timer);
			};
		};
	</script>
</head>
<body>
	<img src="0.jpg" id="pic"/>
	<br /><br />
	<button id="btn01">开始</button>
	<button id="btn02">停止</button>
</body>
</html>

经过测试，点击“开始”按钮开始自动切换图片，点击“停止”按钮关闭该功能。实现效果如下所示：