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

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

学习条件: 在尝试这个小项目之前,你应该已经学习过这个部分的所有文章.
学习目标: 测试一下你对JavaScript的循环、事件、条件语句和事件处理的掌握程度.

最开始的步骤

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

: 另外, 你可以使用像 JSBin 或者 Thimble 这样的网站来完成你的小项目. 你可以把 HTML, CSS 和 JavaScript 代码段粘贴到这些在线编辑器里. 如果你正在用的在线编辑器没有分开的JavaScript/CSS面板, 就尽情地把它们放置在HTML里面的 <script>/<style> 标签里.

项目概括

示范文件中已经提供了一些 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> 相同的 、被摞在<img>上面的<div> 元素(通过设置一个半透明的背景色来制作黑暗效果), 一个用来控制黑暗效果开关的 <button> 元素。
  • 将 thumb-bar <div> (所以叫做“缩略”图片) 中的图片的宽度设置为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 。每一次迭代都把一个img路径赋值给src。记住,图片都在 images 目录下,名字如pic1.jpgpic2.jpg。

给每一个缩略图添加点击事件处理

在 每一次循环迭代中,你需要给当前的 newImage 加上一个点击事件处理器——应该这样做:

  1. 找到当前图片的 src 属性值。这个可以通过对当前的<img>调用getAttribute()来完成。但是如何在代码里获取图片?用 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", 还有把<div>background-color  变为 "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!

文档标签和贡献者

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