如何在 JavaScript 中创建和迭代图像数组

要在浏览器中显示一系列图像，请将它们的路径存储在数组中，用索引保存选中的位置，并将选中的路径赋值给图像元素的 src。上一个和下一个处理程序可以使用取模运算更新索引，使导航可以从非空数组的任一端继续。此模式既适用于现有的图像元素，也适用于由 JavaScript 创建的元素。

在 JavaScript 中使用 Image 对象显示图像数组

浏览器的 Image 构造函数会创建一个图像对象。将每个对象的 src 设置为本地图像路径，然后按希望显示的顺序存储这些对象。src 值标识图像文件；可见的 <img> 元素可以使用所选对象的 src 作为自身的源。

将选中的位置保存在从 0 开始的索引中。以 images 为数组，向前公式为 (index + 1) % images.length，向后公式为 (index - 1 + images.length) % images.length。第一个公式从最后一项移动到第一项；第二个公式从第一项移动到最后一项。两个公式都假设数组至少包含一张图像，并且起始索引在范围内。

在连接导航控件之前，先用第一个对象的 src 初始化可见元素。当某个控件被选中时，更新索引，然后将所选对象的 src 复制到可见元素。保持本地路径与页面 URL 以及图像文件的位置一致。

在 JavaScript 中使用图像路径数组显示图像

字符串数组是按显示顺序保存图像路径的简单方法。下面的示例维护一个索引，并返回每个导航函数选中的路径。这是一个独立的 JavaScript 示例；本草稿未提供执行证据。

const images = [
  "./images/classroom.jpg",
  "./images/animals.jpg",
  "./images/nature.jpg"
];
let index = 0;

const nextImage = () => {
  index = (index + 1) % images.length;
  return images[index];
};

const previousImage = () => {
  index = (index - 1 + images.length) % images.length;
  return images[index];
};

console.log(nextImage());
console.log(previousImage());

在页面中，将图像元素放在容器内，例如 <div id="content"></div>。用 images[index] 初始化其 src；在任一导航函数更新索引后，将新的 images[index] 值赋给同一元素的 src。示例中的路径是占位符，请将其替换为页面可以加载的文件。数组必须至少包含一个路径，初始索引必须指向其中一个条目。

在 JavaScript 中使用 DOM 方法显示图像数组

JavaScript 可以创建要显示的 <img> 元素，而不必在原始 HTML 中要求它。首先在页面中放置一个目标容器，例如 <div id="imageContainer"></div>。然后用 document.getElementById("imageContainer") 获取它，用 document.createElement("img") 创建一张图像，将图像的 src 设置为第一个路径，并用 imageContainer.appendChild(img) 追加它。

将创建的元素和当前索引保留给上一个和下一个处理程序使用。每个处理程序使用上面的回绕公式计算下一个索引，并更新同一元素的 src。这样会创建一个图像元素，并在所选路径变化时重复使用它。容器必须在初始化之前存在；请将脚本放在容器之后，或在 DOMContentLoaded 处理程序中进行初始化。本节直接使用 DOM 方法，不使用 HTML 模板元素。

在 JavaScript 中使用现代 JavaScript 特性显示图像数组

这些示例对不会被重新赋值的绑定使用 const，对变化的索引使用 let，并使用箭头函数语法，例如 const nextImage = () => { ... }。这些描述的是示例中使用的语法；此处不做任何运行时兼容性声明。

对于双向查看器，请在渲染第一个路径之前初始化索引。目标图像元素存在后，从数组设置其初始 src。为下一个和上一个控件提供处理程序，使用上面的公式更新索引，然后刷新显示的 src。这种方法使用数组和索引进行导航；它不使用 forEach。

结论

当您想预先创建图像对象时，使用 Image 对象数组；或者保留一个路径数组，并在选择变化时更新一张可见图像。当 JavaScript 应在容器内创建图像元素时，DOM 方法很有用。无论选择哪种方法，都要初始化显示的图像，使其索引与数组保持一致，并使用回绕公式进行向前和向后导航。