在 JavaScript 中，我們經常需要使用圖片來進行網站或應用開發。然而，在頁面中引用大量的圖片可能會導致頁面加載速度變慢。此時，為了提高網站的性能，我們可以使用一個圖片數組來存儲所有需要使用的圖片，以便在需要時快速的調用，并且減輕對瀏覽器的壓力。
例如，我們可以使用以下代碼創建一個名為“myImages”的圖片數組：

var myImages = ["image1.png", "image2.jpg", "image3.gif", "image4.webp"];

在這個數組中，有四個元素，每個元素都是一個字符串，表示不同的圖片文件名。我們可以隨時添加或刪除數組中的元素來滿足實際需求。
如果我們需要在網頁中顯示這些圖片，可以使用以下代碼來訪問數組中的特定元素：

document.getElementById("myImage").src = myImages[0];

這行代碼將通過 ID 獲取頁面上的圖像元素，并將其 src 屬性設置為數組中的第一個元素。這使得我們可以輕松地在不同的地方使用相同的圖片，并確保圖片只會被加載一次。
另一種使用圖片數組的常見場景是創建輪播圖或幻燈片效果。我們可以將所有幻燈片的圖片路徑存儲在數組中，然后使用 JavaScript 在不同的幻燈片之間切換。

var imageIndex = 0;
var imageArray = ["slide1.jpg", "slide2.jpg", "slide3.jpg", "slide4.jpg"];
function changeImage() {
var img = document.getElementById("slideshow");
img.src = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
setTimeout(changeImage, 2000);
}
window.onload = changeImage;

在這個例子中，我們定義了一個全局變量 imageIndex 來跟蹤當前應該顯示哪張幻燈片的圖片。我們還使用一個名為 imageArray 的數組來存儲所有幻燈片的圖片路徑。
在 changeImage() 函數中，我們首先獲取圖像元素并將其 src 屬性設置為 imageArray 中的元素。然后，我們將 imageIndex 的值加 1，以便在下一個函數調用時顯示下一張幻燈片。如果 imageIndex 大于或等于數組的長度，我們將其重置為 0，以便從頭開始循環。
最后，我們使用 setTimeout() 函數來設置幻燈片顯示的時間間隔（這里為 2 秒）。這將使幻燈片自動滑動并在連續兩張圖片之間添加一個短暫的間隔。
總之，使用圖片數組可以在網站或應用中更方便地管理和使用多個圖片，并且降低了網絡流量和瀏覽器資源的消耗。它是 Web 開發中重要的技術之一，值得我們深入學習和應用。