我们已经学习了 JavaScript 基础的块结构，下面我们通过编写一个常见的基于 JavaScript 的照片库来测验一下你对于循环、函数、条件和事件的掌握情况。
| 预备知识: | 请读完本章其它所有小节的内容后再开始这个测验。 |
|---|---|
| 目标: | 测试你对 JavaScript 的循环、函数、条件语句和事件处理的掌握程度。 |
下载压缩包 并在本地解压。
注：你还可以使用类似 JSBin 或 Thimble 这些在线编辑器来完成测验。你可以把 HTML、CSS 和 JavaScript 代码复制过去。如果你选的工具没有独立的 JavaScript/CSS 板面，可以随时在 HTML 页面中添加 <script>/<style> 元素。
我们提供了一些 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>
你可以尝试操作一下这个示例，也可 在线打开。（不要偷看源代码哦！）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {
font-family: helvetica, arial, sans-serif;
text-align: center;
}
body {
width: 640px;
margin: 0 auto;
}
.full-img {
position: relative;
display: block;
width: 640px;
height: 480px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 640px;
height: 480px;
background-color: rgba(0,0,0,0);
}
button {
background: rgba(150,150,150,0.6);
text-shadow: 1px 1px 1px white;
border: 1px solid #999;
position: absolute;
cursor: pointer;
top: 2px;
left: 2px;
}
.thumb-bar img {
display: block;
width: 20%;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<h1>照片库</h1>
<div class="full-img">
<img class="displayed-img" src="https://roy-tian.github.io/mdn-examples/gallery/images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">变暗</button>
</div>
<div class="thumb-bar"> </div>
<script>
var displayedImage = document.querySelector('.displayed-img');
var thumbBar = document.querySelector('.thumb-bar');
btn = document.querySelector('button');
var overlay = document.querySelector('.overlay');
for(var i = 1; i <= 5; i++) {
var newImage = document.createElement('img');
newImage.setAttribute('src', 'https://roy-tian.github.io/mdn-examples/gallery/images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = function(e) {
var imgSrc = e.target.getAttribute('src');
displayImage(imgSrc);
}
}
function displayImage(imgSrc) {
displayedImage.setAttribute('src', imgSrc);
}
btn.onclick = function() {
var btnClass = btn.getAttribute('class');
if(btnClass === 'dark') {
btn.setAttribute('class','light');
btn.textContent = '变亮';
overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
} else {
btn.setAttribute('class','dark');
btn.textContent = '变暗';
overlay.style.backgroundColor = 'rgba(0,0,0,0)';
}
}
</script>
</body>
</html>
{{ EmbedLiveSample('Image_gallery', '100%', 680, "", "", "hide-codepen-jsfiddle") }}
以下是本例中 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 里。
你应该:
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> 的{{cssxref("background-color")}} 设为 "rgba(0,0,0,0.5)"。"dark", 将 <button> 的类名变为 "dark"，文本内容变为 "变暗"，蒙板 <div> 的{{cssxref("background-color")}} 设为 "rgba(0,0,0,0)"。以下是实现上述 2、3 点所提功能的基本代码：
btn.setAttribute('class', xxx);
btn.textContent = xxx;
overlay.style.backgroundColor = xxx;
如果你是在课堂上进行这个测验，你可以把作品交给导或教授去打分了。如果你是在自学，可以很容易地在 本节测验的讨论页 或 Mozilla 聊天室的 #mdn 频道回复得到批改指南。请先自己试着做，作弊学不到任何东西！
{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}