照片库
我们已经学习了 JavaScript 基础的块结构,下面我们通过编写一个常见的基于 JavaScript 的照片库来测验一下你对于循环、函数、条件和事件的掌握情况。
预备知识: | 请读完本章其它所有小节的内容后再开始这个测验。 |
---|---|
目标: | 测试你对 JavaScript 的循环、函数、条件语句和事件处理的掌握程度。 |
起点
下载压缩包 并在本地解压。
项目简介
我们提供了一些 HTML、CSS、相片和几行 JavaScript 代码。需要你来编写必要的 JavaScript 代码让这个项目运行起来。HTML 的 body 部分如下:
<h1>照片库</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">变暗</button>
</div>
<div class="thumb-bar">
</div>
你可以尝试操作一下这个示例,也可 在线打开。(不要偷看源代码哦!)
以下是本例中 CSS 文件最值得关注的部分:
full-img <div>
中有三个绝对定位的元素:一个显示全尺寸图片的<img>
,一个空<div>
(覆盖在<img>
之上,且与之大小相同,用来设置半透明背景色来使图片变暗),和一个用来控制变暗效果的<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
里。
你应该:
- 在"遍历图片"注释下方添加一个循环来遍历 5 张图片,只需要遍历 5 个数字,每个数字代表一张图片。
- 每次迭代中,用图片路径的字符串替换掉占位符
xxx
。即在每次迭代中把src
属性设置为图片的路径。记住,图片都在 images 目录下,文件名是pic1.jpg
、pic2.jpg
,等等。
给每一个缩略图添加点击处理器
每次迭代中,你需要给当前的 newImage
加上一个 onclick
事件处理函数——它应该:
- 找到当前图片的
src
属性值。这个可以通过对当前的<img>
用"src"
作为参数调用getAttribute()
函数来完成,但是如何在代码里获取图片?用newImage
是不行的,因为在事件处理函数应用之前循环已经结束,这样每次迭代src
的值都会是最后一张图片。因此,对于每个事件处理器,<img>
都是函数的目标。是否可以从事件对象获得相关信息呢。 - 调用一个函数,取上一步返回的
src
值作为参数。可以给这个函数起一个喜欢的名字。 - 事件处理器函数应该把
displayed-img <img>
的src
属性值设为作为参数传入的src
值。我们已经提供了一个displayedImg
变量存储相关的<img>
。注意我们需要的是一个定义好的、有名字的函数。
为变亮/变暗按钮编写处理器
还剩最后的变亮/变暗 <button>
。我们已经提供了一个名为 btn
的变量来存储 <button>
的引用。需要添加一个 onclick
事件处理函数:
- 检查当前
<button>
按钮的类名称,仍可用getAttribute()
函数取得。 - 如果类名的值是
"dark"
, 将<button>
的类名变为"light"
(使用setAttribute()
), 文本内容变为 "变亮",蒙板<div>
的background-color
设为"rgba(0,0,0,0.5)"
。 - 如果类名的值不是
"dark"
, 将<button>
的类名变为"dark"
,文本内容变为 "变暗",蒙板<div>
的background-color
设为"rgba(0,0,0,0)"
。
以下是实现上述 2、3 点所提功能的基本代码:
btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
提示
- 完全不需要修改 HTML 和 CSS 文件。
测验
如果你是在课堂上进行这个测验,你可以把作品交给导或教授去打分了。如果你是在自学,可以很容易地在 本节测验的讨论页 或 Mozilla 聊天室的 #mdn 频道回复得到批改指南。请先自己试着做,作弊学不到任何东西!