具体代码和逻辑如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div.container {
        width: 800px;
        height: 1000px;
        margin: 0 auto;
        text-align: center;
        border: 1px solid orange;
        border-radius: 15px;
        position: relative;
      }
      div > img {
        width: 750px;
      }
      div#bottom {
        text-align: center;
      }
      button.left {
        position: absolute;
        left: 100px;
        bottom: 20px;
      }
      button.right {
        position: absolute;
        right: 100px;
        bottom: 20px;
      }
      #img-container {
        overflow: hidden;
        border-radius: 15px;
        width: 750px;
        height: 900px;
        margin: 0px 25px 0 25px;
      }
      button {
        width: 200px;
        height: 50px;
        outline: none;
        cursor: pointer;
      }
      #info {
        position: absolute;
        left: 380px;
        bottom: 35px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="img-container">
        <img id="image" src="images/01.jpeg" alt="" />
      </div>
      <div id="bottom">
        <button id="left" class="left">←上一张</button>
        <span id="info">0/0</span>
        <button id="right" class="right">下一张 →</button>
      </div>
    </div>
  </body>
  <script>
    // 要修改的就是图片里面的src
    var img = document.querySelector("img");
    // 上一张下一张按钮
    var preButton = document.getElementById("left");
    // 刚进来的时候，上一张按钮处于不能点的状态
    preButton.disabled = "true";
    var nextButton = document.getElementById("right");
    // 图片下面的两个数字0/10
    var spanNum = document.querySelector("span");
    // 把所有图片的路径放在一个数组里面，点击按钮，改变数组的下标
    // 然后把图片数组的下标，放到img里面的src下面
    // 定义一个变量，用来赋值图片数组的下标
    var picNum = 0;
    var picArray = [
      "images/01.jpeg",
      "images/02.jpeg",
      "images/03.jpeg",
      "images/04.jpeg",
      "images/05.jpeg",
      "images/06.jpeg",
      "images/07.jpeg",
      "images/08.jpeg",
      "images/09.jpeg",
      "images/10.jpeg",
    ];
    spanNum.innerHTML = `${picNum + 1} / ${picArray.length} `;
    // 图片下面的2个数字,第一个是图片数组的下标，第二个是图片数组的长度
    // 开始写点击下一张按钮的事件
    nextButton.onclick = function () {
      // 点击了下一张，上一张就可以点了
      preButton.disabled = false;
      if (picNum < picArray.length - 1) {
        picNum++;
        //  2个数字随时更新
        spanNum.innerHTML = `${picNum + 1} / ${picArray.length} `;
        // img里面的src也更新
        img.src = picArray[picNum];
      }

      // 如果已经是10/10了，就不能点按钮了
      if (picNum === picArray.length) {
        // 直到点击了上一张按钮，下一张按钮就可以点了
        nextButton.disabled = true;
      }
    };

    // 开始写上一张按钮的逻辑
    // 逻辑和上面的一样，注释不写了
    preButton.onclick = function () {
      // 点击了上一张，下一张的按钮就可以点了
      preButton.disabled = false;
      if (picNum > 1) {
        picNum--;
        spanNum.innerHTML = `${picNum} /${picArray.length} `;
        img.src = picArray[picNum];
      }
    };
  </script>
</html>
DOM制作一个相册点击更换图片的效果

具体代码和逻辑如下
