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 里。

你应该:

1. 在"遍历图片"注释下方添加一个循环来遍历 5 张图片，只需要遍历 5 个数字，每个数字代表一张图片。
2. 每次迭代中，用图片路径的字符串替换掉占位符 xxx。即在每次迭代中把 src 属性设置为图片的路径。记住，图片都在 images 目录下，文件名是 pic1.jpg、pic2.jpg，等等。

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

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

1. 找到当前图片的 src 属性值。这个可以通过对当前的 <img> 用 “src” 作为参数调用 getAttribute() 函数来完成，但是如何在代码里获取图片？用 newImage 是不行的，因为在事件处理函数应用之前循环已经结束，这样每次迭代 src 的值都会是最后一张图片。因此，对于每个事件处理器，<img> 都是函数的目标。是否可以从事件对象获得相关信息呢。
2. 调用一个函数，取上一步返回的 src 值作为参数。可以给这个函数起一个喜欢的名字。
3. 事件处理器函数应该把 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;

---

完整代码

const displayedImage = document.querySelector('.displayed-img');
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* 添加图片循环 */

for(var i=1; i<=5; ++i){
    const newImage = document.createElement('img');
    newImage.setAttribute('src', "images/pic" + i +".jpg");
    thumbBar.appendChild(newImage);
}

thumbBar.addEventListener("click", function(e){
    if(e.target && e.target.nodeName == "IMG") {
        // console.log(e.target.src);
        img_src = e.target.src;
        displayedImage.setAttribute("src", img_src);
    }
});
/* 编写 变暗/变量 按钮功能 */

btn.addEventListener("click", function(e){
    if(e.target.textContent == '变亮'){
        e.target.textContent = '变暗';
        displayedImage.setAttribute("class", "light");
        overlay.style.backgroundColor = "rgba(0,0,0,0)";
    } else{
        e.target.textContent = '变亮';
        displayedImage.setAttribute("class", "dark");
        overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
    }
});