<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图片切换</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#outer{
			width:500px;
			margin:50px auto;
			padding: 10px;
			background-color: greenyellow;
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			//点击按钮切换图片
			//获取两个按钮
			var prev=document.getElementById("prev");
			var next=document.getElementById("next");
			//获取img标签
			var img=document.getElementsByTagName("img")[0];
			//创建一个数组用来保存图片路径
			var imgArr=["1.jpeg","2.jpeg","3.jpeg","4.jpeg","5.jpeg"];
			//创建一个变量，保存当前显示图片的索引
			var index=0;
			//设置提示文字
			//获取id为info的p元素
			var info=document.getElementById("info");
			//设置提示文字
			info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
			//绑定单击响应函数
			prev.onclick=function(){
				//切换上一张，索引自减
				index--;
				//判断index是否小于0
				if(index<0){
					index=imgArr.length-1;
				}
				img.src=imgArr[index];
				//点击按钮重新设置信息
				info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
			};
			next.onclick=function(){
				index++;
				if(index>imgArr.length-1){
					index=0;
				}
				img.src=imgArr[index];
				//点击按钮重新设置信息
				info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
			};
		};
	</script>
</head>
<body>
	<div id="outer">
		<p id="info"></p>
		<img src="1.jpeg" width="450px"><br>
		<button id="prev">上一张</button>
		<button id="next">下一张</button>
	</div>
</body>
</html>

(作者观看的学习视频：B站尚硅谷）

更多推荐

JavaScript HTML图片切换