手风琴效果

        当你想在有限的页面空间内展示多个内容片段的时候，手风琴（Accordion）效果就显得非常有用，它可以帮助你以对用户非常友好的方式实现多个内容片段之间的切换。借助流行的 jQuery 框架，只需很少的代码就可以实现精美的手风琴效果，帮助你的网站吸引更多用户的眼球。

首先演示最终实现的效果图：

整体的框架为一个通过精密计算的固定宽和高的div标签，里面存放一个ul标签。其中包含7个（即你实际想投放的图片的数目）li标签，须严格保证每个图片的像素高度和深度保持一致，不允许偏差一个像素，否则影响整体的美感。li标签再由两部分构成，span标签（星空景象XX）和img标签，使其float：left，设置整个div的高度等于图片的高度，宽度值容得下一张图片和7个span标签，为了美观起见另外多出7个像素，使的每个li标签间隔一个像素。

下面看一下代码：

HTML部分：（首先导入JQuery）

CSS部分：

JS部分：