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

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

最开始的步骤

下载压缩包 ,然后在电脑上的任意目录下解压。

注意: 此外,你可以使用像 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>大小相同并盖在它上面的<div>(用来通过设置一个半透明的背景色来使图片变黑), 一个用来控制变黑效果的<button>
  • 将 thumb-bar <div>(所谓”缩略图“)中的图片的宽度设置为20%,并且将它们设置为浮动至左边,所以它们会在同一行上依次排列。

你的 JavaScript 需要:

  • 遍历所有相片,对每张相片生成一个<img>元素并把它们插到thumb-bar <div>里,这样图片就会嵌到页面上。
  • thumb-bar <div>里的每个<img>元素添加一个onclick处理函数,在图片被点击时相应的图片被显示到displayed-img <img>元素上。
  • <button>元素添加一个onclick处理函数,当按钮被点击时,在全尺寸图片显示一个变黑的效果,再次点击时取消变黑。

为了给你更多灵感,你可以看看完成的例子(别偷看源码!)

具体步骤

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

遍历相片

我们提供的代码中用一个名为thumbar的变量用来存储thumb-bar <div>的引用,创建了一个新的<img>元素,将它的 src 属性值设置成xxx占位符,并且将这个新的 <img> 元素添加到thumbBar里。

你需要做:

  1. 将 "Looping through images" 注释下面的代码段放进一个循环来遍历5张图片——你只需要遍历5个数字,每个数字代表一张图片。
  2. 在每一次循环迭代中 ,用图片的路径的字符串替换掉占位符 xxx 。这就是在每次迭代中把src属性设置为图片的路径。记住,图片都在 images 目录下,名字是pic1.jpgpic2.jpg

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

在每一次循环迭代中,你需要给当前的 newImage 加上一个onclick事件处理函数——它应该:

  1. 找到当前图片的src属性值。这个可以通过对当前的<img>"src"作为参数调用getAttribute()函数来完成,但是如何在代码里获取图片?用newImage行不通,因为在事件处理函数应用之前整个循环就已经跑完了;这样做的话每次迭代 src 的值都会是最后一张图片。为了解决这个,记住对于每个事件处理函数,<img> 都是函数的目标(target)。试试从事件对象获得相关信息。
  2. 调用一个函数,将上一步返回的src值作为参数传递进去。你可以给这个函数起一个你喜欢的名字。
  3. 事件处理器函数应该把displayed-img <img> 的 src 属性值设为作为参数传入的src值。我们已经提供了一个 displayedImg 变量存储相关的 <img>。注意我们需要的是一个定义好的、有名字的函数。

使变亮/变暗的按钮起作用

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

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

评估

如果这个评估是一系列课程的一部分,你应该可以让你的老师或导师为你批改。 如果你是自学,可以很容易地在 discussion thread about this exerciseMozilla IRC#mdn IRC频道回复得到批改指南。请先自己试着做——作弊学不到任何东西!

 

在本单元中

 

文档标签和贡献者

此页面的贡献者: Park-ma, codeofjackie, lihaoyuan, yeslogin2, Zeng
最后编辑者: Park-ma,