<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
//获取信息显示ID info
var info = document.getElementById("info");
//获取图片ID images
var images = document.getElementById("images");
var path = ["../images/5.png","../images/6.png","../images/7.png","../images/8.png"];
//定义图片索引
var index = 0;
//获取单击按钮标签 button
var bt = document.getElementsByTagName("button");
//上一张功能实现
bt[0].onclick = function () {
index--;
//判断index是否小于0
if(index < 0){
index = path.length - 1;
}
images.src = path[index];
info.innerHTML ="一共 "+path.length+" 张图片，当前是第 "+(index+1)+" 张，"+"当前图片的文件名称是"+path[index];
};
//下一张功能实现
bt[1].onclick = function () {
index++;
if(index > path.length - 1){
index = 0;
}
//切换图片就是修改img的src属性
//要修改一个元素的属性 元素.属性 = 属性值
images.src = path[index];
info.innerHTML ="一共 "+path.length+" 张图片，当前是第 "+(index+1)+" 张，"+"当前图片的文件名称是"+path[index];
};
};
</script>
<div>
<p id="info"></p>
<p>
<img id="images" src="../images/5.png" width="200px">
</p>
<p>
<button value="上一张" style="width:auto;height: auto;">上一张</button>
<button value="下一张" style="width: auto;height: auto;">下一张</button>
</p>
</div>
</body>
</html>
