<div class="img">
 <img src="images/1.jpg" id="myImg" class="myImg" alt="这里是1.jpg">
 <p>
 <input type="button" id="pre" class="btn" value="上一张">
 <input type="button" id="next" class="btn" value="下一张">
 </p>
</div>

//找标签
let myImg = document.getElementById("myImg");
let pre=document.getElementById("pre");
let next=document.getElementById("next");

//创建一个保存图片的数组
let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//数组的索引下标
let index=0;
//定义事件函数
function preImg(event){
 index--;
 //实现循环切换
 if (index<0)
 {
  index=arrImg.length-1;
 }
 myImg.src = arrImg[index];
}
function nextImg(event){
 index++;
 //实现循环切换
 if (index>arrImg.length-1)
 {
 index=0;
 }
 myImg.src = arrImg[index];
}

pre.addEventListener('click',preImg);
next.addEventListener('click',nextImg);