<head>
<link rel="stylesheet" href="liteAccordion.css">
<script src="jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="liteaccordion.jquery.js"></script>
</head> 页面Body里面加入下面的代码，这是Basic风格的，其他风格设置请参考压缩包中的文件。代码里是默认5页内容块，你要是页面够宽可以在加几个li，其他风格类似。<div id="yourdiv">
<ol>
<li>
<h2><span>Slide One</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Two</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Three</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Four</span></h2>
<div></div>
</li>
<li>
<h2><span>Slide Five</span></h2>
<div></div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div> 最后，liteAccordion 粉墨登场，下面的代码放到</Body>之前。youdiv是上面展示块的ID名，也可以用Class名，确保你的Class名唯一。<script>
$('#yourdiv').liteAccordion();
</script>插件选项：（默认值）containerWidth : 960, // 展示块的宽度，单位px
containerHeight : 320, // 展示块的高度，单位px
headerWidth: 48, // 展示块标题栏宽度，单位px
activateOn : 'click', // 激活切换方式，click 或者 mouseover
firstSlide : 1, // 页面打开后哪一页展示内容展开
slideSpeed : 800, // 切换速度，单位毫秒
onTriggerSlide : function() {}, // 切换时功能调用
onSlideAnimComplete : function() {}, // 切换完成后功能调用
autoPlay : false, // 是否自动切换
pauseOnHover : false, // 鼠标移动到内容页上是否暂停切换
cycleSpeed : 6000, // 内容页切换间隔时间，单位毫秒
easing : 'swing', // jQuery easing切换效果参数
theme : 'basic', // 展示块风格：basic, dark, light, stitch
rounded : false, // 展示块方角还是圆角
enumerateSlides : false, // 展示块标题栏上是否显示数字
linkable : false // 通过外部链接点击切换插件方法：所有方法均支持链式操作。play // 开始播放已停止的切换 stop // 停止正在播放的切换 next // 切换到下一个 prev // 切换到上一个 destroy // 去除展示块，干掉所有事件句柄和风格等 debug // 返回一个debug物件
$('#yourdiv').liteAccordion('play');
$('#yourdiv').liteAccordion('next').liteAccordion('next');$('#yourdiv').liteAccordion({
theme : 'dark',
rounded : true,
enumerateSlides : true,
firstSlide : 2,
linkable : true,
easing: 'easeInOutQuart'
});使用jQuery easing为easeOutBounce的展示，Light风格，鼠标移动到标题条即可切换：$('#yourdiv').liteAccordion({
theme : 'light',
firstSlide : 3,
easing: 'easeOutBounce',
activateOn: 'mouseover'
});
上一篇“双面” 劳动节
