图片库
现在我们已经了解了 JavaScript 的基本构建块，我们将通过让你构建一个在很多网站上都能看到的非常常见的项目——一个由 JavaScript 驱动的图片库——来测试你对循环、函数、条件语句和事件的知识。
| 先决条件 | 在尝试此评估之前，你应该已经完成了本模块中的所有文章。 |
|---|---|
| 目标 | 测试对 JavaScript 循环、函数、条件语句和事件的理解。 |
起点
要开始此评估，你应该前往 下载示例的 ZIP 文件，将其解压缩到你的计算机上的某个位置，并从本地执行练习。
或者，你可以使用在线编辑器，例如 CodePen、JSFiddle 或 Glitch。
注意：如果你卡住了，你可以在我们的 沟通渠道 中联系我们。
项目简述
我们为你提供了一些 HTML、CSS 和图像资产以及几行 JavaScript 代码；你需要编写必要的 JavaScript 代码将这些代码转化为一个可运行的程序。HTML 主体看起来像这样
<h1>Image gallery example</h1>
<div class="full-img">
<img
class="displayed-img"
src="images/pic1.jpg"
alt="Closeup of a blue human eye" />
<div class="overlay"></div>
<button class="dark">Darken</button>
</div>
<div class="thumb-bar"></div>
示例看起来像这样
示例 CSS 文件中最有趣的部分
- 它在
full-img <div>内绝对定位了三个元素——显示完整尺寸图片的<img>、一个大小与<img>相同的空<div>，并将其直接放在<img>的顶部（这用于通过半透明背景色对图片应用变暗效果），以及一个用于控制变暗效果的<button>。 - 它将
thumb-bar <div>（所谓的“缩略图”图片）内的任何图片的宽度设置为 20%，并将它们浮动到左侧，以便它们在一行上并排排列。
你的 JavaScript 需要
- 声明一个
const数组，列出每个图片的文件名，例如'pic1.jpg'。 - 声明一个
const对象，列出每个图片的备用文本。 - 遍历文件名数组，对于每个文件名，在
thumb-bar <div>内插入一个<img>元素，将该图片嵌入到页面中，并附带其备用文本。 - 在
thumb-bar <div>内的每个<img>上添加一个点击事件监听器，以便在点击它们时，在displayed-img <img>元素中显示相应的图片和备用文本。 - 在
<button>上添加一个点击事件监听器，以便在点击它时，对完整尺寸图片应用变暗效果。再次点击它时，变暗效果会再次消失。
为了让你更好地了解，请查看 完成的示例（不要偷看源代码！）。
完成步骤
以下部分描述了你需要做的事情。
声明一个图像文件名数组
你需要创建一个数组，列出要包含在画廊中的所有图片的文件名。该数组应声明为常量。
遍历图片
我们已经为你提供了将 thumb-bar <div> 的引用存储在一个名为 thumbBar 的常量中的代码行，创建一个新的 <img> 元素，将其 src 和 alt 属性设置为占位符值 xxx，并将这个新的 <img> 元素追加到 thumbBar 内。
你需要
- 将“遍历图片”注释下的代码部分放在一个循环中，该循环遍历数组中的所有文件名。
- 在每次循环迭代中，用一个字符串替换
xxx占位符值，该字符串将等于每个情况下的图片路径和 alt 属性。将src和alt属性的值设置为这些值。请记住，图片位于 images 目录内，其名称为pic1.jpg、pic2.jpg等。
在每个缩略图图片上添加点击事件监听器
在每次循环迭代中，你需要在当前 newImage 上添加一个点击事件监听器——这个监听器应该找到当前图片的 src 属性的值。将 displayed-img <img> 的 src 属性值设置为作为参数传递的 src 值。然后对 alt 属性执行相同的操作。
或者，你可以在缩略图栏上添加一个事件监听器。
编写一个运行变暗/变亮按钮的处理程序
只剩下我们的变暗/变亮 <button> 了——我们已经提供了一行代码，将 <button> 的引用存储在一个名为 btn 的常量中。你需要添加一个点击事件监听器，该监听器
- 检查当前在
<button>上设置的类名——你也可以通过使用getAttribute()来实现这一点。 - 如果类名是
"dark"，则将<button>类更改为"light"（使用setAttribute()）、将它的文本内容更改为“变亮”，并将覆盖<div>的background-color更改为"rgb(0 0 0 / 50%)"。 - 如果类名不是
"dark"，则将<button>类更改为"dark"，将它的文本内容更改回“变暗”，并将覆盖<div>的background-color更改为"rgb(0 0 0 / 0%)"。
以下几行代码为实现上面第 2 和第 3 点中规定的更改提供了一个基础。
btn.setAttribute("class", xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;