与其重复做这样的事情，为什么不尝试一些有效的事情呢？在做一些非常类似于你想做的事情时，我使用了Blueimp gallery。它的设置很简单，上一个/下一个按钮都可以工作，包括使用箭头键和在移动的上。

正如Steve科克伦所建议的那样，最好使用一些库来实现你想要做的事情，但是如果你只是打算玩HTML和Javascript，你的上一个/下一个按钮应该和关闭按钮完全一样工作。
1.给予它们的DOM元素一个ID
1.通过脚本中的ID检索DOM元素
1.附加单击侦听器
1.执行上一个或下一个操作背后的逻辑

<img id="myImg" src="myimage" alt="wjuuuu" width="760" height="478">


<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
  <span id="previous">&lt;</span>
  <span id="next">&gt;</span>
</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// Get the previous button
var previous = document.getElementById('previous');
previous.onclick = function() {
  /* your logic here */
}

// Get the next button
var next = document.getElementById('next');
next.onclick = function() {
  /* your logic here */
}
</script>

由于我们不知道图像来自哪里，因此无法为您实现previous和next函数。希望能帮上忙。