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

使用JavaScript開發網頁畫廊

PHPz

發布： 2023-08-09 20:10:43

原創

1108 人瀏覽過

使用JavaScript開發網頁畫廊

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>网页画廊</title>
    <style>
        .gallery {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 400px;
        }
        
        .gallery img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .controls button {
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img id="image" src="images/1.jpg" alt="image">
    </div>
    <div class="controls">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>

    <script src="script.js"></script>
</body>
</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屬性設定為目前索引對應的圖片路徑。