作者有话要说：此文适合前端初学者哦~如有大神路过，请多多指教。

最近在看《JavaScript DOM编程艺术》这本书，顺手给大家安利下。不得不说作者真真是极其细致的一个人，写得不仅通俗易懂，而且妙趣横生，非常适合初学者。本文也是来自书中第四-六章的案例。好啦，废话不多说，直接先上成果。

视频加载中...

我这里写了一个二十四节气，图片均源自网络，仅用于分享教学，如涉及侵权，请联系我删除。大家可自行发挥创意，比如写一个情侣照片库啦，旅游照片合辑啦等等都是非常不错的idea呢。

1.整体结构和框架

从视频中可以看到我们的需求是点击相应的文本，在当前窗口内切换图片和相应的说明文字。那么需要在网页内设置一个图片占位符，并阻止超链接的默认弹窗行为。将整个文档分为两部分，列表部分和展示部分。

分别设置list和show的CSS属性。

2.列表部分

接下来优化list，这部分的思路就是一个4x6的弹性盒。首先补充list中的a标签，添加图片路径和title属性。二十四个节气就有24个a标签，此处有省略。

我这里将每个小格子命名为block，同样设置为弹性盒，这样可以方便地把文本链接用margin：auto实现上下左右居中。最后可根据自己的喜好更改链接被鼠标悬停、被访问后的状态。

至此list部分就写好啦。

列表部分整体的完成效果

3.占位符初始状态

占位符初始状态指的是链接未被点击之前显示的一张默认图片，我这里就用第一张图片（第一个节气）来显示。最最关键的部分要来了，如何使图片在当前占位符位置切换呢？这里肯定是要编写一个JS函数的，把它命名为replace.js。

占位符初始状态

4.编写一个简单的showPic()

为图片占位符命名为placeholder，替换文本命名为description，分别设置CSS属性。

占位符整体的效果

当链接被点击时进行替换行为。我们可以在每个a链接中绑上onclick属性，将行为函数命名showPic()，参数即为当前a标签（this）。

在showPic()里需要完成的事件是：获取a标签中的href属性，用它来替换placeholder中的src属性；获取a标签中的title属性，用它来替换description中的文本（nodeValue值）。注意此处文本是p标签的第一个子节点，所以要加上.firstChild。

showPic()函数写完了，接下来就是要阻止a链接被点击时的默认弹出新窗口行为（因为我们想要图片切换就发生在占位符位置）。有以下两种实现方式：

一是在onclick中直接添加return false；

二是让showPic()函数的返回值直接为false，然后在onclick中返回showPic()函数的返回值。

至此这个图片库就全部写好啦，快去试试吧~