如何使用 HTML、CSS 和 JavaScript 創建一個簡單的圖片庫
使用 HTML、CSS 和 JavaScript 創建一個簡單的圖片庫是學習 Web 開發基礎知識的好方法。在圖片庫中，您可以通過選擇縮略圖來瀏覽圖片以放大網頁上的圖片。
要創建圖庫，您可以使用 HTML 添加網頁內容並使用 CSS 添加樣式。當用戶單擊任何縮略圖時，您可以使用 JavaScript 使圖庫具有交互性。
如何為圖片庫創建 UI
使用 HTML 和 CSS 添加圖片庫的 UI。這包括在網頁中央添加一個大圖像，該圖像將根據所選縮略圖發生變化。您還可以在 GitHub 上查看完整的示例源代碼。
- 創建一個名為“index.html”的新文件。
- 在此文件中，添加基本的 HTML 代碼結構：
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - 創建一個名為“images”的子文件夾。用幾張圖片填充它，並將它們命名為“image1.jpg”到“image10.jpg”。
- 在您的 HTML 文件中，為圖片庫添加一個 div：
<div id="image-gallery">
</div> - 在圖庫 div 中，添加圖像標籤以顯示放大的所選圖像。默認情況下，顯示“images”文件夾中的第一張圖像：
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - 在與 HTML 文件相同的文件夾中，使用以下 CSS 添加一個名為“styles.css”的新文件。隨意修改 CSS 以添加新形態設計組件或使用這些 CSS 提示和技巧進行其他設計調整。
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - 在 HTML 文件的 head 標籤中添加指向 CSS 文件的鏈接：
<link rel="stylesheet" type="text/css" href="styles.css">
如何為圖庫中的其他圖像添加縮略圖
目前，圖片庫僅顯示第一張圖片。在所選圖像下方，添加縮略圖列表。這些縮略圖將顯示“圖像”文件夾中所有圖像的預覽。
- 在 HTML 文件的圖庫 div 中，添加另一個 div 以顯示其他圖像的縮略圖：
<div id="image-thumbs"></div> - 在 CSS 文件中，為縮略圖列表添加一些樣式：
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - 在與 HTML 和 CSS 文件相同的文件夾中，添加一個名為“script.js”的新文件。
- 在 HTML 正文標記的底部添加指向您的 JavaScript 文件的鏈接：
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - 在 JavaScript 文件中，獲取將存儲縮略圖列表的 div 的 HTML 元素：
var imageThumbs = document.getElementById("image-thumbs"); - 添加一個 for 循環以循環遍歷圖庫中的 10 張圖像：
for (var i = 1; i <= 10; i++) {
} - 在循環內，為每個圖像創建一個新的 img 元素：
var thumb = document.createElement("img"); - 為“src”和“alt”屬性添加值。在這種情況下，“src”屬性是“images”文件夾內同一索引處圖像的文件路徑：
thumb.src = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - 在您的 CSS 文件中，添加一個新類來設置圖像縮略圖的樣式。您還可以為縮略圖添加其他懸停或過渡 CSS 樣式，以使您的網站具有響應性和交互性。
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - 在 JavaScript 文件中，將上述類添加到新縮略圖：
thumb.classList.add("thumb"); - 將新縮略圖添加到包含縮略圖列表的 HTML 元素：
imageThumbs.appendChild(thumb);
如何在用戶單擊縮略圖時更改圖像
當用戶單擊其中一個縮略圖時，將頁面中央的放大圖像更改為所選圖像。您可以在 JavaScript 文件中添加此功能。
- 在 JavaScript 文件的頂部，獲取當前所選圖像的 HTML 元素：
var currentImage = document.getElementById("current-image"); - 在 for 循環內，添加一個事件處理程序，當用戶選擇頁面底部的任何縮略圖時觸發該事件處理程序：
thumb.addEventListener(
"click", function() {
}
); - 在事件處理程序中，將當前圖像的“src”屬性更改為新選擇的圖像。您還可以更新“alt”屬性：
currentImage.src = this.src;
currentImage.alt = this.alt; - 單擊“index.html”文件以在網絡瀏覽器中打開它。
- 選擇任一縮略圖以查看圖像。
繼續擴展你的 JavaScript 知識
無論您的經驗如何，重要的是繼續構建項目以擴展您的知識。繼續探索其他項目，例如構建國際象棋遊戲、計算器或待辦事項列表。
發佈留言