JS实现小电视播放图片(自动播放)

最新推荐文章于 2023-06-23 16:15:48 发布

豌豆二锅头

最新推荐文章于 2023-06-23 16:15:48 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44750790/article/details/106507135

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

需求：实现一个小电视，里面可以播放图片，并且附带有开始按钮和暂停按钮。

思路：利用js中的定时器来解决这个问题，我们可以利用定时器的自动执行，来改变图片的地址，进而达到播放的效果。

代码：

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>显示鼠标坐标</title>
	<style type="text/css">
	</style>
	</head>
	<body>
		<img id="photo" src="img/01.jpg" alt="图片" /><br>
		<input type="button" id="strat" value="开始播放" />
		<input type="button" id="end" value="暂停" />
		<script type="text/javascript">
			
		var start =document.getElementById("strat");
		var  timer=0;
		var index=0;
		//BUG
		//点一次开一个，可能会是个bug，开多了，那就变得图片像是在闪烁一样
		/*并且导致我们只能够关了最后一个定时器，因为timer只有一个*/
		start.onclick=function(){
			
			
		//在开启定时器之前，需要将上一个定时器关闭
		clearInterval(timer);	
						
		var photo=document.getElementById("photo");
		var imgArr=['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg'];
		timer=setInterval(function(){
			index++;
			index%=imgArr.length;
			photo.src=imgArr[index];
		},1000);
		};
		
		var end=document.getElementById("end");
		end.onclick=function(){
			clearInterval(timer);
		};
		</script>
	</body>
</html>