最近在调试一种动画效果，用到了HTML 5 其中的<figure> 标签，<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。我主要做的效果是图片的左右滑动切换，当中用到了一个Jquery的插件来协助完成。主要的参数有以下：
画布的宽度
containerWidth : 960, // width of accordion (px)
画布的高度
containerHeight : 320, // height of accordion (px)
各个页签的距离宽度
headerWidth : 48, // width of tabs (px)
第一滑动页
firstSlide : 1, // number of the first active slide (integer)
动作执行函数
onActivate : function() {}, // callback function triggered on tab click/mouseover (function)
滑动的速度
slideSpeed : 800, // speed of slide animation (time/ms)
滑动的函数
slideCallback : function() {}, // callback function triggered after slide animation is complete (function)
自动演示
autoPlay : false, // automatically scroll through the slides, if true with pause on user click (boolean)
悬停鼠标的状态
pauseOnHover : false, // *NEW in 1.1* - pause slides on hover
循环周期的速度
cycleSpeed : 6000, // time between slide activation (time/ms)
主题，主要有基础主题，轻主题，黑色主题，缝主题
theme : 'basic', // which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
圆角
rounded : false, // whether to use rounded corners or not** (boolean)
页签的枚举号码，按数生长
enumerateSlides : false // show slide number in tab
How：如何使用？
头引入-----
<head>
<link rel="stylesheet" href="liteAccordion.css">
</head>
body引入-----
<body>
...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="liteaccordion.jquery.js"></script>
</body>
最后就是你大展身手的时刻了！PS：最后还有两种主题可以自己进行定制，或者自己创造性的改进，大家快动起手来吧~~
这是我的小小效果图：
相关支持链接：
HTML编程设计-常用颜色的RGB值及中英文名称
http://wenku.baidu.com/view/ecc0dd3183c4bb4cf7ecd175.html
HTML 5 <figure> 标签
http://www.w3school.com.cn/html5/tag_figure.asp
高手Demo讨教
http://js.alixixi.com/demo/lite/
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
