最近在調試一種動畫效果，用到了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/
