使用JavaScript開發網頁畫廊-js教程-PHP中文網

使用JavaScript開發網頁畫廊

隨著網路的不斷發展，網頁設計也變得更加精緻和互動。其中，畫廊是一個常見的網頁設計元素，它能夠展示多張圖片，並提供瀏覽和切換的功能。本文將介紹如何使用JavaScript開發一個簡單的網頁畫廊，並提供程式碼範例。

首先，我們需要準備一些圖片資源。可以在專案資料夾中建立一個名為"images"的資料夾，並將所有圖片放在其中。這裡我們使用五張圖片作為範例。圖片資源準備好後，我們開始編寫JavaScript程式碼。

建立HTML結構
我們首先需要建立一個HTML結構，用來顯示圖片和提供切換功能。程式碼如下：

   网页画廊

登入後複製

在上述程式碼中，我們使用了一個有"gallery"類別的div來容納圖片，一個id為"image"的img元素用來顯示圖片。下方是一個具有"controls"類別的div，其中包含兩個按鈕，分別用於切換上一張和下一張圖片。這樣我們就建立了基本的HTML結構。

寫JavaScript邏輯
接下來，我們需要寫JavaScript程式碼來實作圖片的切換功能。在專案資料夾中建立一個名為"script.js"的文件，並編寫如下程式碼：

// 获取元素 const image = document.getElementById("image"); const prevBtn = document.getElementById("prev"); const nextBtn = document.getElementById("next"); // 图片列表 const images = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"]; // 当前显示的图片索引 let currentIndex = 0; // 切换到上一张图片 prevBtn.addEventListener("click", () => { currentIndex--; if (currentIndex < 0) { currentIndex = images.length - 1; } image.src = images[currentIndex]; }); // 切换到下一张图片 nextBtn.addEventListener("click", () => { currentIndex++; if (currentIndex >= images.length) { currentIndex = 0; } image.src = images[currentIndex]; });

登入後複製

在上述程式碼中，我們首先透過getElementById方法取得到需要操作的元素，即img元素和兩個按鈕。然後，我們定義了一個包含所有圖片路徑的陣列images，並初始化目前顯示圖片的索引為0。

接下來，透過addEventListener方法為prevBtn按鈕新增一個點擊事件的監聽器。當按鈕被點擊時，currentIndex減1，並檢查索引是否小於0。如果是，將currentIndex設定為images數組的最後一個元素的索引值，即實現循環切換。最後，將img元素的src屬性設定為目前索引對應的圖片路徑。

接著，我們為nextBtn按鈕新增一個類似的點擊事件監聽器。當按鈕被點擊時，currentIndex加1，並檢查索引是否超出images數組的長度。如果是，將currentIndex設為0，實現循環切換。最後，同樣將img元素的src屬性設定為目前索引對應的圖片路徑。