圖片庫
現在我們已經瞭解了 JavaScript 的基本構建塊，我們將透過讓你構建一個在很多網站上都能看到的非常常見的專案——一個由 JavaScript 驅動的圖片庫——來測試你對迴圈、函式、條件語句和事件的知識。
| 先決條件 | 在嘗試此評估之前，你應該已經完成了本模組中的所有文章。 |
|---|---|
| 目標 | 測試對 JavaScript 迴圈、函式、條件語句和事件的理解。 |
起點
要開始此評估，你應該前往 下載示例的 ZIP 檔案，將其解壓縮到你的計算機上的某個位置，並從本地執行練習。
或者，你可以使用線上編輯器，例如 CodePen、JSFiddle 或 Glitch。
注意：如果你卡住了，你可以在我們的 溝通渠道 中聯絡我們。
專案簡述
我們為你提供了一些 HTML、CSS 和影像資產以及幾行 JavaScript 程式碼；你需要編寫必要的 JavaScript 程式碼將這些程式碼轉化為一個可執行的程式。HTML 主體看起來像這樣
<h1>Image gallery example</h1>
<div class="full-img">
<img
class="displayed-img"
src="images/pic1.jpg"
alt="Closeup of a blue human eye" />
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar"></div>
示例看起來像這樣
示例 CSS 檔案中最有趣的部分
- 它在
full-img <div>內絕對定位了三個元素——顯示完整尺寸圖片的<img>、一個大小與<img>相同的空<div>，並將其直接放在<img>的頂部（這用於透過半透明背景色對圖片應用變暗效果），以及一個用於控制變暗效果的<button>。 - 它將
thumb-bar <div>（所謂的“縮圖”圖片）內的任何圖片的寬度設定為 20%，並將它們浮動到左側，以便它們在一行上並排排列。
你的 JavaScript 需要
- 宣告一個
const陣列，列出每個圖片的檔名，例如'pic1.jpg'。 - 宣告一個
const物件，列出每個圖片的備用文字。 - 遍歷檔名陣列，對於每個檔名，在
thumb-bar <div>內插入一個<img>元素，將該圖片嵌入到頁面中，並附帶其備用文字。 - 在
thumb-bar <div>內的每個<img>上新增一個點選事件監聽器，以便在點選它們時，在displayed-img <img>元素中顯示相應的圖片和備用文字。 - 在
<button>上新增一個點選事件監聽器，以便在點選它時，對完整尺寸圖片應用變暗效果。再次點選它時，變暗效果會再次消失。
為了讓你更好地瞭解，請檢視 完成的示例（不要偷看原始碼！）。
完成步驟
以下部分描述了你需要做的事情。
宣告一個影像檔名陣列
你需要建立一個數組，列出要包含在畫廊中的所有圖片的檔名。該陣列應宣告為常量。
遍歷圖片
我們已經為你提供了將 thumb-bar <div> 的引用儲存在一個名為 thumbBar 的常量中的程式碼行，建立一個新的 <img> 元素，將其 src 和 alt 屬性設定為佔位符值 xxx，並將這個新的 <img> 元素追加到 thumbBar 內。
你需要
- 將“遍歷圖片”註釋下的程式碼部分放在一個迴圈中，該迴圈遍歷陣列中的所有檔名。
- 在每次迴圈迭代中，用一個字串替換
xxx佔位符值，該字串將等於每個情況下的圖片路徑和 alt 屬性。將src和alt屬性的值設定為這些值。請記住，圖片位於 images 目錄內，其名稱為pic1.jpg、pic2.jpg等。
在每個縮圖圖片上新增點選事件監聽器
在每次迴圈迭代中，你需要在當前 newImage 上新增一個點選事件監聽器——這個監聽器應該找到當前圖片的 src 屬性的值。將 displayed-img <img> 的 src 屬性值設定為作為引數傳遞的 src 值。然後對 alt 屬性執行相同的操作。
或者，你可以在縮圖欄上新增一個事件監聽器。
編寫一個執行變暗/變亮按鈕的處理程式
只剩下我們的變暗/變亮 <button> 了——我們已經提供了一行程式碼，將 <button> 的引用儲存在一個名為 btn 的常量中。你需要新增一個點選事件監聽器，該監聽器
- 檢查當前在
<button>上設定的類名——你也可以透過使用getAttribute()來實現這一點。 - 如果類名是
"dark"，則將<button>類更改為"light"（使用setAttribute()）、將它的文字內容更改為“變亮”，並將覆蓋<div>的background-color更改為"rgb(0 0 0 / 50%)"。 - 如果類名不是
"dark"，則將<button>類更改為"dark"，將它的文字內容更改回“變暗”，並將覆蓋<div>的background-color更改為"rgb(0 0 0 / 0%)"。
以下幾行程式碼為實現上面第 2 和第 3 點中規定的更改提供了一個基礎。
btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;