如何在 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 方法很有用。無論選擇哪種方法，都要初始化顯示的圖像，使其索引與陣列保持一致，並使用回繞公式進行向前和向後導覽。