TouchSlide 可以說是 SuperSlide 手機簡化版,不同的地方在于:
1、TouchSlide是純javascript開發的,不依賴任何js庫,鑒于此,TouchSlide調用方法和SuperSlide有點不同。
調用方法為:TouchSlide({slideCell:"#slider",effect:"leftLoop"});(slideCell必須為id對象);同樣效果,SuperSlide調用方法為:jQuery("#slider").slide({ effect:"leftLoop" });
2、為了方便使用,我用js模擬了簡單的jQuery選擇器,只支持“#”“.”“標簽名稱”,用空格隔開。除了slideCell必須用id選擇器外,其它titCell等都可以使用,例如:titCell:".title li"
3、除了上述2個不同,其它是一致的,想了解更多可以下載demo研究。
參數 | 版本 | 默認值 | 說明 | 詳細 |
---|---|---|---|---|
slideCell | 1.0 | "#touchSlide" | 容器對象(執行效果的對象,必須是id對象?。?/i> | 圖解>> |
titCell | 1.0 | ".hd li" | 導航元素對象 | 圖解>> |
mainCell | 1.0 | ".bd" | 切換元素的包裹層對象 | 圖解>> |
autoPage | 1.0 | false | 系統自動分頁,需結合titCell使用,若為true,則titCell為導航元素的包裹層對象 | 圖解>> |
effect | 1.0 | "left" | 效果 || left:左滾動;|| leftLoop:左循環滾動; | |
autoPlay | 1.0 | false | 自動運行 | |
delayTime | 1.0 | 200 | 毫秒;切換效果持續時間(執行一次效果用多少毫秒)。 | |
interTime | 1.0 | 2500 | 毫秒;自動運行間隔(隔多少毫秒后執行下一個效果) | |
switchLoad | 1.0 | null | 內容切換加載,暫時只支持圖片,必須配合后臺程序使用。當為圖片的時候switchLoad為圖片實際路徑的屬性名稱,例如switchLoad:"_src" | 詳解>> |
startFun | 1.0 | null | 每次切換效果開始時執行函數,用于處理特殊情況或創建更多效果。用法 satrtFun:function(i,c){ }; 其中i為當前分頁,c為總頁數 | 詳解>> |
endFun | 1.0 | null | 每次切換效果結束時執行函數,用于處理特殊情況或創建更多效果。用法 endFun:function(i,c){ }; 其中i為當前分頁,c為總頁數 | 詳解>> |
pageStateCell | 1.0 | ".pageState" | 分頁狀態對象,用于顯示分頁狀態,例如:2/3 | |
prevCell | 1.0 | ".prev" | 前一個/頁按鈕對象。 | |
nextCell | 1.0 | ".next" | 后一個/頁按鈕對象。 | |
pnLoop | 1.0 | true | 前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效,同時增加prevStop/nextStop類名控制樣色 | |
defaultIndex | 1.0 | 0 | 默認的當前位置索引。0是第一個; defaultIndex:1 時,相當于從第2個開始執行 | |
titOnClassName | 1.0 | "on" | 當前titCell位置自動增加的class名稱 |