需求：实现一个小电视，里面可以播放图片，并且附带有开始按钮和暂停按钮。
思路：利用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>
PS:电视机的效果，自己设置个背景，然后把div放在中间挖空的位置当做电视就可了。这里主要实现代码的主要部分。
转载：https://blog.csdn.net/weixin_44750790/article/details/106507135
查看评论