手风琴效果是图片的另一种展示方式，从效果上看，它与普通的图片轮播图有相似之处，JavaScript部分的某些代码也是相似的。示例设计为不同的5张图片，在同一时期，5张图片中只有1张图片可以完全显示出来，其余的4张图片为折叠状态。当鼠标不在图片上方，5张图片每隔一段时间便会自动切换。鼠标位于图片上方时停止切换，鼠标单击某张图片时会展示被点击的图片。
与图片轮播图相比，手风琴的实现原理更加简单。在实例的HTML部分，5张图片以列表呈现，每个列表项都左浮动排列在一起并且滋出隐藏。折叠的图片宽度较小，展示的图片宽度较大，列表自动撑开与左浮动的布局会使得所有的图片合理地排列在一起。
纯CSS代码实现功能存在局限性，不能自动播放，操作也同样受限。使用JavaScript则可以实现。
友情提示：本节示例涉及JavaScript相关知识，建议学习完JavaScript章节后再回头练习。本节示例相对复杂，对于初学者来说有一定的难度，这里就不再显示示例代码，感兴趣的读者可以下载到本地学习。