纯CSS实现相册滑动浏览_2

这是一个很简单的纯CSS相册滑动浏览效果，仅用一个无序列表ul结合简单的CSS就可以实现。原文中介绍的纵向滑动相册的实现方法，但是相比之下个人更喜欢横向滑动的那个。两者在缩略图的实现上有所区别，前者是采用收缩原始图片宽度的方法，会给人以很不自然的挤扁的感觉，而后者通过局部显示原始图片达到缩略的效果，虽然这种缩略图不能让我们概览整张图片，但我们可以通过提炼图片重点特征或添加说明文字等方法，来提升浏览者对图片的了解，最重要的是它在视觉协调性上更胜一筹。

首先来看一下XHTML部分，准备好七张相册图片以及一张默认的相册背景图win_backh.gif，把它们存储在网站的windows目录下，如前所述，七张图片的缩略图我们直接通过定义CSS来实现，不需要另外制作。我们以一个ul作为容器把这几张图片添加到页面中，并设置空链接，当然你也可以在链接中设置具体的地址：

<ul id="gallery">
    <li><a href="#"><img src="windows/b1.jpg" /></a></li>
    <li><a href="#"><img src="windows/b2.jpg" /></a></li>
    <li><a href="#"><img src="windows/b3.jpg" /></a></li>
    <li><a href="#"><img src="windows/b4.jpg" /></a></li>
    <li><a href="#"><img src="windows/b5.jpg" /></a></li>
    <li><a href="#"><img src="windows/b6.jpg" /></a></li>
    <li><a href="#"><img src="windows/b7.jpg" /></a></li>
</ul>