<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
background-color: #00FFFF;
width: 600px;
height: 620px;
margin: 50px auto;
text-align: center;
padding: 10px;
}
img{
width: 580px;
height: 580px;
}
</style>
<script>
window.onload=function(){
var img = document.getElementsByTagName("img")[0];
var imgArr = ["./img/01.png","./img/02.png","./img/03.png","./img/04.png"];
var index = 0 ;
var tip = document.getElementById("tip");
//tip.innerHTML="共"+imgArr.length+"张图片,当前是第"+（index+1）+"张";
tip.innerHTML="共"+imgArr.length+"张图片，当前是第"+(index+1)+"张图片";
var bt1 = document.getElementById("bt1");
bt1.onclick= function(){
index--;
if(index<0){
index=imgArr.length-1;
}
img.src= imgArr[index];
tip.innerHTML="共"+imgArr.length+"张图片，当前是第"+(index+1)+"张图片";
};
var bt2 =document.getElementById("bt2");
bt2.onclick =function(){
index++;
if(index>imgArr.length-1){
index=0;
}
img.src = imgArr[index];
tip.innerHTML="共"+imgArr.length+"张图片，当前是第"+(index+1)+"张图片";
};
};
</script>
</head>
<body>
<div id="box">
<p id="tip"></p>
<a><img src="./img/01.png" alt="真人"></a>
<button id="bt1">上一张</button>
<button id="bt2">下一张</button>
</div>
</body>
</html>