1、引用jQuery.js 和 jquery.SuperSlide.js
因為SuperSlide是基於jQuery的插件，所以前提必須先引用jQuery，再引用SuperSlide
<head>
<script type="text/javascript" src="../jquery1.42.min.js"></script>
<script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>
2、編寫HTML
以下是默認的HTMl結構，分別是 ".hd" 里面包含ul， ".bd" 里面包含ul
<div class="slideTxtBox">
<div class="hd">
<ul><li>教育</li><li>培訓</li><li>出國</li></ul>
</div>
<div class="bd">
<ul>
<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式發布！</a></li>
...
</ul>
<ul>
<li><a href="http://www.SuperSlide2.com" target="_blank">名師教作文：３妙招巧寫高分</a></li>
...
</ul>
<ul>
<li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亞八大名校招生說明會</a></li>
...
</ul>
</div>
</div>
3、編寫CSS，為HTML賦予樣色
認真檢查您的css，保證兼容大部分瀏覽器前提下再調用SuperSlide
.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left; } .slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; } .slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; } .slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; } .slideTxtBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; } .slideTxtBox .bd ul{ padding:15px; zoom:1; } .slideTxtBox .bd li{ height:24px; line-height:24px; } .slideTxtBox .bd li .date{ float:right; color:#999; }
4、調用SuperSlide
在本例中，請在 “.slideTxtBox” div結束后立刻調用 SuperSlide，這樣會得到最好的效果，避免整個頁面加載后再調用 SuperSlide；
因為是默認HTML結構，所以參數都為默認值，不用填寫titCell、mainCell等。
<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>
5、使用參數
| 參數 | 版本 | 默認值 | 說明 | 詳細 |
|---|---|---|---|---|
| type | 2.1 | slide | 效果類型，可選"slide"||"menu"，引入type:"menu"專門處理菜單/導航效果 | |
| defaultPlay | 2.1 | true | 默認是否執行效果（第一次運行是否執行效果）常用於導航/菜單 | |
| returnDefault | 2.1 | false | 鼠標移出容器，是否返回默認狀態，常用於導航/菜單 | |
| mouseOverStop | 2.1 | true | 鼠標移到容器層（無縫滾動是mainCell）是否停止播放 | |
| playStateCell | 2.1 | ".playState" | 播放/暫停狀態按鈕，點擊后會增加/刪除"pauseState"類名用於控制樣色。可參考 [2.22-真·全屏焦點圖] | |
| switchLoad | 2.0 > 2.1 | null | 內容切換加載，暫時只支持圖片，必須配合后台程序使用。當為圖片的時候switchLoad為圖片實際路徑的屬性名稱，例如switchLoad:"_src" [v2.1] 修復當scroll>1時，switchLoad無效的bug。 |
詳解 |
| easing | 2.0 > 2.1 | "swing" | 緩動效果； [v2.1]更改默認效果為“swing”，使效果更流暢 |
所有 |
| startFun | 2.0 > 2.1 | null | 每次切換效果開始時執行函數，用於處理特殊情況或創建更多效果。用法 startFun:function(i,c){ }； 其中i為當前分頁，c為總頁數 [v2.1]增加傳遞參數，startFun:function( i, c, slider, titCell, mainCell, targetCell, prevCell, nextCell ){}，這樣簡寫就方便了。 例如 jQuery(".slideBox").slide({ startFun:function( i,c,s ){ s.show() } }); 這里的 s.show() 相當於 jQuery(".slideBox").show() |
詳解 |
| endFun | 2.0 > 2.1 | null | 每次切換效果結束時執行函數，用法和startFun一致 | 詳解 |
| triggerTime | 2.0 | 150 | 毫秒，titCell觸發時間，默認150毫秒延遲，以防重復執行效果。若為0即鼠標移過titCell立刻執行效果 | |
| targetCell | 2.0 > 2.1 | null | 切換元素對象，處理內容切換元素非包裹狀態下等情況，實現更多效果，處理更多情況，能和titCell、mainCell同時使用。只支持fade效果。 [v2.1] 增加支持slideDown效果。 |
詳解 |
| pageStateCell | 2.0 | ".pageState" | 分頁狀態對象，用於顯示分頁狀態，例如：2/3 | |
| pnLoop | 2.0 | true | 前/后按鈕是否繼續循環，若為false則當翻動到最前/后頁時，前/后按鈕點擊無效，同時增加prevStop/nextStop類名控制樣色 | |
| opp | 2.0 | false | 默認反方向運動，例如 effect:"leftMarquee" 然后設置 opp:true，則效果為右滾動。常用於leftMarquee/topMarquee | |
| autoPage | 1.2 > 2.1 | false | [v1.2] 程序自動分頁，需結合titCell使用，若為true，則titCell為導航元素的包裹層對象。ps：scroll>1時，記得設置autoPage:true，否則分頁錯誤。 [v2.1] 支持自定義分頁html，$為數字替換位置。例如autoPage:"<li><a>$</a></li>"，如果不想輸出數字：autoPage:"<li><a></a></li>"。 |
圖解 |
| titCell | 1.0 | ".hd li" | 導航元素對象（鼠標的觸發元素對象） | 圖解 |
| mainCell | 1.0 | ".bd" | 切換元素的包裹層對象 | 圖解 |
| effect | 1.0 > 2.0 >2.1 | "fade" | 動畫效果 [v1.0] fade：漸顯； || top：上滾動；|| left：左滾動；|| topLoop：上循環滾動；|| leftLoop：左循環滾動；|| topMarquee：上無縫循環滾動；|| leftMarquee：左無縫循環滾動； [v2.0] fold：淡入淡出 [v2.1] slideDown：下拉效果 |
|
| autoPlay | 1.0 | false | 自動運行 | |
| interTime | 1.0 | 2500 | 毫秒；自動運行間隔。當effect為無縫滾動(topMarquee/leftMarquee)時，相當於運行速度。 | |
| delayTime | 1.0 | 500 | 毫秒；切換效果持續時間（一次切換效果執行所用的時間長度）。 | |
| trigger | 1.0 | "mouseover" | titCell觸發方式 || mouseover：鼠標移過觸發；|| click：鼠標點擊觸發； | |
| scroll | 1.0 | 1 | 每次滾動個數。 | |
| vis | 1.0 | 1 | visible縮寫，mainCell的可視范圍個數，當實際內容個數少於可視個數的時候，不執行SuperSlide效果。 | 圖解 |
| prevCell | 1.0 | ".prev" | 前一個/頁按鈕對象。 | |
| nextCell | 1.0 | ".next" | 后一個/頁按鈕對象。 | |
| defaultIndex | 1.0 | 0 | 默認的當前位置索引。0是第一個； defaultIndex:1 時，相當於從第2個開始執行 | |
| titOnClassName | 1.0 | "on" | 當前titCell位置自動增加的class名稱 |