fsbanner是一款非常实用的响应式网站Banner手风琴特效jQuery插件。该手风琴特效兼容IE8浏览器，支持点击和鼠标滑过2种模式，并且可以制作图片的描述信息效果。

使用方法

使用该手风琴特效需要引入jQuery和fsbanner.js以及fsbanner.css文件。

<link rel="stylesheet" type="text/css" href="css/fsbanner.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/fsbanner.js"></script>
HTML结构

fsBanner手风琴特效插件使用一组<div>元素来制作栈结构的手风琴效果。它的HTML结构类似下面的样子：

<!--list of banners to be stacked -->
<div class='fsbanner'>
    <!-- first banner -->
    <div style='background-image:url(images/black.jpg)' />
      <span class='name'>BLACK</span>
    </div>
    <!-- second banner -->
    <div style='background-image:url(images/brown.jpg)' />
      <span class='name'>BROWN</span>
    </div>
    ......
</div>

你可以添加任意多个Banner，带.name class的span元素可以省略，另外你也可以添加一些其它的span元素，具体请参考它的参数选项。

初始化插件

在页面DOM元素加载完毕之后，可以通过fsBanner()方法来初始化该手风琴插件。

$('.fsbanner').fsBanner(options);

配置参数

参数 值 默认值 描述
showName true / false true 如果设置为true，.name元素将被显示在Banner的左下方
trigger click / mouse click 使用哪种方式来触发手风琴的展开和收缩
toUpdate hash {} 当你展开一个Banner的时候，脚本会从它的HTML元素中的span元素中获取信息。你可以通过这个选项来使用这些值去更新其它元素。
whenEmpty hash {} 当没有Banner展开的时候（初始化时或重置banner宽度的时候），就不会有消息显示在toUpdate选项中指定的元素中。
hideParent selector null 如果设置了该选项，whenEmpty参数将被忽略。当没有banner同时又设置了hideParent的时候，脚本将隐藏传入的选择器元素。
onChanged function null 当banner被展开的时候该函数将被触发。它接收2个参数：展开的banner和之前展开的banner。这些参数是jQuery选择器。

fsbanner手风琴插件的github地址为：https://github.com/fiote/fsbanner