这篇翻译不完整。请帮忙从英语翻译这篇文章

既然我们已经学了一些基础的 JavaScript 构造语句,现在我们来测试你对于循环、函数、条件、事件的掌握。为了完成这个测试,你会构建一个在网站上非常常见的东西——一个 JavaScript 构建的 相片走廊。

Prerequisites: Before attempting this assessment you should have already worked through all the articles in this module.
Objective: To test comprehension of JavaScript loops, functions, conditionals, and events.

最开始的步骤

你首先需要下载示范文件 grab the ZIP ,在电脑上的任意目录下解压即可。

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have separate JavaScript/CSS panels, feel free to put them inline <script>/<style> elements inside the HTML page.

项目概括

示范文件中已经提供了一些 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 文件中最有趣的部分如下:

  • 非常明显的,在 full-img <div>中有三个元素 — 全尺寸展示的图片放在 <img> 元素中,一个空的但是大小和 <img> 相同的 <div> 元素and put right over the top of it (这是通过设置一个半透明的背景色来制作黑暗效果时需要的), 一个用来控制海岸效果的 <button> 元素。
  • 将 thumb-bar <div> (so-called "thumbnail" images) 中的图片的宽度设置为20%,并且将它们设置为浮动至左边,因此确保它们可以沿着直线依次排列。

你的 JavaScript 需要做以下工作:

  • 将所有的相片串连起来,并且在 thumb-bar <div> 中插入的每个 <img> 元素都会被嵌入带页面的相片中。
  • thumb-bar <div> 中的每个 <img> 元素加上一个点击事件处理器,并且匹配需要在 displayed-img <img> 中展示的相片。 
  • 给 <button> 元素加上一个点击事件处理器,从而给全尺寸展示的照片加上黑暗效果,当再次点击时则移除黑暗效果。

为了给你更多灵感,你可以看看 finished example (别偷看源代码!)

具体步骤

下面介绍你需要做的步骤。

将相片串连

我们已经提供了你一些代码,这些代码中有一个 thumbar 变量用来表示 thumb-bar <div> ,创建了一个新的 <img> 元素,将它的 src 属性值设置成一个 xxx 容器,并且将这个新的 <img> 元素添加进 thumbBar。

你需要做:

  1. 将 "Looping through images" 的代码放进一个循环来遍历5张图片——你只需要遍历5个数字即可,每个数字代表一张图片。
  2. 在每一次循环迭代中 ,将 image 的路径赋值给 xxx 。我们会在每次情况中将 scr 参数的值等价于 xxx。记住在每个情况中,相片都在 images 目录下,然后名字如pic1.jpgpic2.jpg。

为 thumbnail 中的相片加上一个点击事件处理器

在 每一次循环迭代中,你需要给现在的 newImage 加上一个点击时间处理器——应该:

  1. 找到现在图片的 src 属性值。这个可以通过将 getAttribute()函数作用每个情况下的相片即可(将参数 src 的值传进函数即可)。但是如何获得图片?使用 newImage 时不起作用的,因为在事件处理器作用前会完成整个循环;这样做的话每种情况下 src 的值都会是最后一张图片。为了解决这个,记住每次事件处理时,<img> 都是处理的目标。那么为什么不试试从事件对象获得信息。
  2. 运行函数,将返回的 src 函数作为参数传递进函数。在任何你需要的时候运行函数。
  3. 时间处理器函数应该 displayed-img <img> 的 src 参数值作为 src 的值从而作为函数参数值传入。我们已经提供了一个 displayedImg 变量存储相关的 <img>。注意我们想要在这而定义一个函数。

写一个处理器来运行变亮/变暗的按钮

现在是剩下 darken/lighten <button> — 我们已经提供了一个 btn 变量来存储 <button>。你需要加上一个这样的点击事件处理器:

  1. 检查当前 <button> 按钮的 class 值 — 你可以使用 getAttribute( ) 函数得到这个值。
  2. 如果 class 的值是 "dark", 将 <button> 的类名变为 "light"(使用 setAttribute()), 文本内容变为 "Lighten",, and the background-color of the overlay <div> to "rgba(0,0,0,0.5)".
  3. 如果 class 的值不是 "dark", 将 <button> 的类名变为 "dark", 文本内容变为 "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;

提示

  • 你完全不需要编辑 HTML 和 CSS 文件。

任务

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!

文档标签和贡献者

 此页面的贡献者: Zeng
 最后编辑者: Zeng,