JS实现小电视播放图片（手动播放）

最新推荐文章于 2022-02-23 17:46:17 发布

豌豆二锅头

最新推荐文章于 2022-02-23 17:46:17 发布

阅读量441

点赞数

分类专栏： JavaScript

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

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

需求：实现页面上显示一张图片，每点击一次，可以自由向上切换图片或者向下切换图片

思路：
1.得有两个按钮，一张图片
2.要修改图片，也就是修改页面中 img标签中的src，我们得想办法修改它的src
3.要修改，就得获取到img元素，所以，通过document.getElementsByTagName（）来获取这个对象，因为它返回的是一个维数组【可迭代对象】，然后又只有一个元素【我们只显示一张图片】，所以就直接[0]了
4.获得了该img元素之后，只需要给两个按钮绑定单击响应函数【这两个单击响应函数去修改对应的src即可】
5.其实不难实现这个代码

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			#outer{
				margin:0;
				padding:0;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div id="outer">
		<img src="img/01.jpg" alt="01"/>
		<button id="pre">上一张</button>
		<button id="next">下一张</button>
		</div>
		<script type="text/javascript">
			//获得两个对象按钮元素
			var pre=document.getElementById("pre");
			var next=document.getElementById("next");
			
			//创建一个数组，存放路径，其实这里也可以利用字符串去直接修改img的路径
			//不用存放在数组中，比如 src.img='img/0'+index+'.jpg',这样也是可以的，只不过对于命名不太友好，这样我们可以给图片起一些花里胡哨的名称
			var imgArr=['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg','img/05.jpg'];
			
			//当前正在显示的图片的索引
			var index=0;
			
			//切换图片，就是修改src即可
			var img = document.getElementsByTagName("img")[0];
			//为两个对象绑定单击函数
			pre.onclick=function (){
				--index;
				if(index<0)//数组不能越界
				{
					index=imgArr.length-1;
				}
				img.src=imgArr[index];
	
			};
			next.onclick=function(){
				++index;
				if(index >imgArr.length-1)
				{
					index=0;
				}
				img.src=imgArr[index];
			};
		</script>
	</body>
</html>

结构：
在这里插入图片描述

第一次改进的想法：
要实现轮播图：最关键的就是下标的问题，即下标不能越界
这样也是可以实现的，把整个下标限制在数组的范围内【能使用变量来表示就尽量使用变量来表示，到时不用因为图片数目的增减而修改源代码】

pre.onclick=function (){
				--index;
				index=(index+imgArr.length)%imgArr.length;
				img.src=imgArr[index];
	
			};
			next.onclick=function(){
				++index;
				index=(index+imgArr.length)%imgArr.length;
				img.src=imgArr[index];
			};