在代码5的第5行，首先通过attr()函数获取<a>的href属性，即链接地址imgPath；第6行根据该连接地址创建一个img标签，将该标签的src属性赋值为imgPath；第7行，首先将图片隐藏，后面将通过淡入的方式华丽出现；第8行将img标签添加到<div></div>中，如果没有第7行的隐藏操作，此时图像会立即出现；第9行，使用淡入的方式显示图像。OK，保存代码，在浏览器中打开，点击缩略图，发现已经有了相册查看效果了，但是，当我们连续点击相册图片的时候，历史图片并不会消失，如果我们一直点击下去，图片会一直罗列。如下图所示：
实际上，每当我们点击一个缩略图的时候，代码都会为我们创建一个新的img并添加到<div></div>中，从DOM的角度看，会不停地增加子节点：
为了实现”相册”翻阅的效果，我们在显示新的相片的时候同时要把之前的图片删掉。继续在代码5中作如下添加：
...//省略未改动部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $('#bigImg img'); var newImg = $('<img src="' + imgPath + '">'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ $(this).remove(); }); });//end click
代码第6行首先获取当前存在的图像oldImg，在新的图片淡入的时候，此图应该进行淡出处理。11~13行，在新的图片淡入之后，oldImg淡出。同时给fadeOut函数传入一个回调函数，在oldImg淡出之后一并移除该图像的img标签。这样我们就保证在DOM树中<div></div>始终只有一个img节点，而不会无限地增长下去。
接下来进行一些细节的调整，当我们点入这个页面的时候，希望默认显示第一幅图片，为了实现这个小功能，我们只需要在代码6后面添加一行代码：
...//省略未改动部分 $('#gallery a').click(function(evt){ evt.preventDefault(); var imgPath = $(this).attr('href'); var oldImg = $('#bigImg img'); var newImg = $('<img src="' + imgPath + '">'); newImg.hide(); $('#bigImg').prepend(newImg); newImg.fadeIn(1000); oldImg.fadeOut(1000, function(){ $(this).remove(); }); });//end click $('#gallery a:first').click();
我们在后面添加了$('#gallery a:first').click();，在jQuery中，如果没有给事件函数传递任何参数，jQuery便会触发一次该事件。保存代码，重新用浏览器打开，第一幅图片已经默认显示了：
3、css绝对定位实现图片的重叠
漂亮的相册集基本上已经完成了，但是吹毛求疵地看，当我们更换要查看的照片的时候，旧图片的淡出会在新图的后面完成，给人一种赘余不利落的感觉：
为了解决这个问题，我们让新图的淡入和旧图的淡出重叠显示。为了实现图片的重叠显示我们需要用到css的绝对定位。
通常情况下，在隐藏或者添加一个新的元素的时候，其他元素会像流一样自动移动来填补空白或者给新的元素腾位置。但是像我们本文的示例，如果我们不希望看到这样的效果，我们可以使用css的绝对定位。css的绝对定位会把一个元素放置在常规页面内容流之外，这样就不会在内容流中出现填补移动等操作了。如果我们使用绝对定位将元素定位在相同的位置，那么元素将会重叠在一起。本例中，这恰恰是我们想要的。实现起来其实十分简单，只需要在css中将<div></div>中的img指定为绝对定位就可以了。我们在代码1的</style>前添加以下代码：
#bigImg img { position: absolute; }
保存，重新用浏览器打开，大功告成！漂亮的相册已经做好了。