<!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>

JavaScript实现单击上一张和下一张按钮切换图片_文件名