结构部分：
上一张
下一张
样式部分：
*{
margin: 0;
padding: 0;
}
#container{
width: 450px;
margin:50px auto;
padding: 20px;
text-align: center;
background-color: antiquewhite;
}
img{
width: 450px;
height: 200px;
}
.btn button{
background-color: aqua;
color: white;
border: 0;
}
js部分：
var btn1=document.getElementsByTagName("button")[0];
var btn2=document.getElementsByTagName("button")[1];
var img=document.getElementsByTagName("img")[0];
var p=document.getElementsByTagName("p")[0];
// 创建一个数组用于放图片地址
var imgArr=["./img/img1.jpg","./img/img2.jpg","./img/img3.jpg"];
// 创建一个变量用于存图片索引
var index=0;
p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";
// 点击上一张按钮
btn1.οnclick=function(){
index--;
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";
}
// 点击下一张按钮
btn2.οnclick=function(){
index++;
if(index>imgArr.length-1){
index=0;
}
img.src=imgArr[index];
p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";
}
效果图(不太好看)：
