当你点击一个特定的元素时，你必须指定“发生什么”。因为你还没有这样做，所以你在这里写的所有JS代码都会在页面加载后立即执行。在这种情况下，你必须在你的Previous和Next按钮上添加一个EventListener，并且你必须在callback函数内部编写你的逻辑。

<div>
    <button id="prevbutton"><h3>Previous</h3></button>
 
    <a href="" id="pagelink" target="_blank">
      <img src="" height="400px" id="page-holder">
    </a>
          
    <button id="nextbutton"><h3>Next</h3></button>
</div>

<script>

let pageNumber = 1;
let imageBaseUrl = "https://example.com/Images/Art/Sketchbook Page ";   

        
const pageHolder = document.getElementById('page-holder');
const pageLink = document.getElementById('pagelink');
const previousButton = document.getElementById('prevbutton');
const nextButton = document.getElementById('nextbutton');

previousButton.addEventListener("click", function(){

  if ( pageNumber === 0 ) {
     // You may not need the pageNumber in negative numbers
     return;
  }

  pageNumber--;
  let imageUrl = imageBaseUrl + pageNumber + ".png";
  pageHolder.src = imageUrl;
  pageLink.href = imageUrl;
});

nextButton.addEventListener("click", function(){
  pageNumber++;
  let imageUrl = imageBaseUrl + pageNumber + ".png";
  pageHolder.src = imageUrl;
  pageLink.href = imageUrl;
});         

</script>

字符串

通过将URL存储在数组中并跟踪当前图像URL索引，可以实现在图像URL列表中的向前和向后循环。如果要将图像源更新为下一个图像，请将索引修改为下一个有效数组索引，然后更改源。若要向后，请从索引中减去。
下面是一个可重复使用的示例。它在每个步骤中都包含注解以帮助解释。此外，这里还有一些链接，指向所使用的一些API的文档：

• Array.prototype.map()
• Remainder operator ( % )的
• EventTarget: addEventListener() method的

"use strict";

// Create an array of the image URLs.
// I found these examples in a random npm package called "dog-cat-photo":
const imageUrls = [
  "cat.png",
  "cat_1600771384399.png",
  "dog.png",
  "dog_1600771291892.png",
  "dog_1600771306027.png",
].map((fileName) =>
  `https://cdn.jsdelivr.net/npm/[email protected]/${fileName}`
);

// Store the index of the current image URL.
// It is initialized to the last valid index in the array
// so that the initial update (below) will display the first image:
let currentImageIndex = imageUrls.length - 1;

// Create a reference to the image element:
const img = document.querySelector("img.current");

// Update the index by incrementing or decrementing it,
// ensuring that it stays in the valid range of array element indexes:
const changeImage = (prevOrNext) => {
  currentImageIndex = (currentImageIndex + (prevOrNext === "next" ? 1 : -1)) %
    imageUrls.length;
  if (currentImageIndex < 0) currentImageIndex += imageUrls.length;
  img.src = imageUrls[currentImageIndex];
};

// Initialize the image source to the first URL in the array:
changeImage("next");

// Bind a click event listener to the "previous" and "next" buttons,
// which invokes the function above, effectively updating the image source:
document.querySelector("button.img-control.previous")
  .addEventListener("click", () => changeImage("previous"));

document.querySelector("button.img-control.next")
  .addEventListener("click", () => changeImage("next"));

body {
  font-family: sans-serif;
  background-color: rgb(14, 14, 14);
  color: #fff;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.img-controls {
  display: flex;
  gap: 1rem;
}

.img-control {
  font-size: 1rem;
  padding: 0.5rem;
}

<div id="root">
  <div class="img-controls">
    <button class="img-control previous">Previous</button>
    <button class="img-control next">Next</button>
  </div>
  <div>
    <img class="current" src="" />
  </div>
</div>