实验五、仿 QQ 空间相册
实验背景
现今的网络已经成为多元化的世界，除了可以阅读到大量的信息，还可以通过发布我们自己的文字，图像和视频等等信息让其他人了解我们，作为个人的私密或开放空间，垫子相册是必不可少的，它可以展示或者记录我们的成长。但是电子相册的效果是怎么实现的呢？这是我们本次实验需要掌握的内容。
实验目的
- 掌握分析问题的方法
- 掌握 HTML 代码结构和 CSS 样式的修饰
- 掌握数组的使用
- 掌握 BOM 模型的使用
- 掌握响应事件函数的使用
- 掌握 for 循环的使用
实验分析
本实验将实现以下几个效果：
- 页面加载完毕后的初始状态，大图默认显示一张占位图；
- 点击 5 张缩略图中的任意一张，将下方的占位图替换成大图，并为点选的缩略图添加边框；
- 当点选其它缩略图后，之前选中的缩略图去掉边框，为当前选中的缩略图添加边框，并将下方的大图替换为当前选中的图片。
实验步骤
步骤一：分析网页结构，写出 HTML 页面
- 创建 html 结构，包括显示 5 个缩略图的区域以及用于显示大图的区域，并添加占位图片（s1.jpg）
- 使用 CSS 创建缩略图边框样式和其他样式修饰
步骤二：编写 JavaScript 代码
- 获得所有的缩略图信息和占位大图的信息
- 创建缩略图点击时触发的函数 showbig() ，先使用 for 循环清除所有的缩略图的样式
- 在函数中获取选中的缩略图信息，为选中的缩略图添加边框样式，并将选中缩略图的路径赋值给大图
- 在每个 img 标签里添加 onclick 事件来调用以上编好的函数