--- title: 影像圖庫 slug: Learn/JavaScript/Building_blocks/Image_gallery tags: - JavaScript - 事件 - 事件處理器 - 優先國際化 - 初學者 - 學習 - 條件式 - 編碼腳本 - 評量 - 迴圈 translation_of: Learn/JavaScript/Building_blocks/Image_gallery ---
{{LearnSidebar}}
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}

現在我們已經看過了基本的JavaScript組建，我們將讓你做一個測試，從建立一個在很多網站上常見的事物 — JavaScript基礎的影像圖庫，來測試你對迴圈、函數、條件式及事件的知識。

先修課程： 在進行這個評量前，你應已閱讀、練習了本模組中所有的文章。
目的： 測試對JavaScript中迴圈、函數、條件式及事件的瞭解程度。

從這裡開始

要進行這個評量，你要先下載 grab the ZIP 檔案，解壓縮在你電腦中的某個檔案夾作為範例。

提醒：你也可以在某些網站進行評鑑，如 JSBin 或Thimble。你可以把這些HTML、CSS和JavaScript貼到這些線上編輯器中。如果你用了一個沒法把JavaScript/CSS分別放在不同面板的線上編輯器，你可以放心的把這些<script>/<style>元件改成inline貼進HTML網頁裡。

專案簡報

你手上已有我們提供的一些 HTML、CSS 和圖片資料，以及幾行 JavaScript 程式碼；你要寫一些必要的 JavaScript 讓它變成可運作的程式。這些 HTML 的 body 看起來如下：

<h1>Image gallery example</h1>

<div class="full-img">
  <img class="displayed-img" src="images/pic1.jpg">
  <div class="overlay"></div>
  <button class="dark">Darken</button>
</div>

<div class="thumb-bar">

</div>

完成後看起來像下圖：

範例 CSS 檔案中最有趣的部分是：

在你的 JavaScript 裡需要：

為了讓你更清楚，你可以看看這個 完成的範例 （但別偷看原始碼！）

一步步完成

接下來幾節描述你該怎麼做。

讓所有圖片迴圈

我們已提供了幾行程式碼：將thumb-bar和 <div>儲存在 thumbBar這個變數裡、建立一個新的 <img> 元件、將它的 src 屬性設定在一個值為 xxx 的佔位符中，以及在 thumbBar 裡增加新 <img> 。

你要做的是：

  1. Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
  2. In each loop iteration, replace the xxx placeholder value with a string that will equal the path to the image in each case. We are setting the value of the src attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is pic1.jpg, pic2.jpg, etc.

在每個縮圖上添加onclick事件處理器

In each loop iteration, you need to add an onclick handler to the current newImage — this should:

  1. 在每個 <img> 中把"src"作為運行getAttribute() 函數的參數，取得現在這張圖片的 src 屬性的值。但是要怎麼抓到現在這張圖片？如果用newImage 是做不到的，當在添加事件處理器前，迴圈已經先完成了；所以你每次都獲得前一個 <img>的回傳的 src 值。解法是，記住，在每個事件中，事件處理器的目標是 <img> ，如何獲得事件物件的資訊呢？
  2. Run a function, passing it the returned src value as a parameter. You can call this function whatever you like.
  3. This event handler function should set the src attribute value of the displayed-img <img> to the src value passed in as a parameter. We've already provided you with a line that stores a reference to the relevant <img> in a variable called displayedImg. Note that we want a defined named function here.

寫一個讓暗化/亮化按鈕可以運作的處理器

That just leaves our darken/lighten <button> — we've already provided a line that stores a reference to the <button> in a variable called btn. You need to add an onclick handler that:

  1. Checks the current class name set on the <button> — you can again achieve this by using getAttribute().
  2. If the class name is "dark", changes the <button> class to "light" (using setAttribute()), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0.5)".
  3. If the class name not "dark", changes the <button> class to "dark", its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <div> to "rgba(0,0,0,0)".

The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.

btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;

提醒與提示

評量

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the Learning Area Discourse thread, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}