先决条件:	在尝试此评估之前，您应该已经完成了本单元中的所有文章。
目的:	测试JavaScript循环，函数，条件和事件的理解。

初始点

要开始评估，您应该去 获取示例的ZIP 文件，并将其解压缩到计算机上的某个位置。

工程概要

您已获得一些HTML，CSS和图片资源以及几行JavaScript代码; 您需要编写必要的JavaScript才能将其转换为工作程序。 HTML主体如下所示:

<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>

示例如下所示:

alt ="">

示例的CSS文件最有趣的部分:

• Absolutely position the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
• Set the width of any images inside the thumb-bar <div> (so-called "thumbnail" images) to 20%, and float them to the left so they sit next to one another on a line.

您的JavaScript需要:

• Loop through all the images, and for each one insert an <img> element inside the thumb-bar <div> that will embed that image in the page.
• Attach an onclick handler to each <img> inside the thumb-bar <div> so that when they are clicked, the corresponding image will be displayed in the displayed-img <img> element.
• Attach an onclick handler to the <button> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.

为了给您更多的想法，请查看完成示例 (没有偷看源代码！)

步骤完成

以下部分描述了您需要做什么。

循环通过图像

我们已经向您提供了一些行，用于存储对缩略图< div> 的引用，该变量名为 thumbBar ，创建一个新的< img&gt ; 元素，将其 src 属性设置为占位符值 xxx ，并将< img> > thumbBar 。

你需要:

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处理程序

在每个循环迭代中，您需要向当前 newImage 添加 onclick 处理程序 - 应该:

1. Find the value of the src attribute of the current image. This can be done by running the getAttribute() function on the <img> in each case, and passing it a parameter of "src" in each case. But how to get the image? Using newImage won't work, as the loop is completed before the event handlers are applied; doing it this way would result in the src value of the last <img> being returned in every case. To solve this, bear in mind that in the case of each event handler, the <img> is the target of the handler. How about getting the information from the event object?
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.

编写一个运行dark / lighten按钮的处理程序

我们已经提供了一行代码，用来存储对< button> 的引用，这个变量叫做 btn 。 您需要添加 onclick 处理程序:

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 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 background-color of the overlay <div> to "rgba(0,0,0,0)".

以下各条为实现上文第2和第3点规定的变动提供了基础。

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

提示和提示

• You don't need to edit the HTML or CSS in any way.

评定

如果您作为有组织课程的一部分参加此评估，您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的，那么您可以轻松地通过 dev-mdc 邮件列表，或者在 #mdn IRC频道中。 org / IRC"class ="external"> Mozilla IRC 。 尝试练习第一 - 没有什么可以通过作弊获得！