TouchSlide 觸屏滑動特效插件


TouchSlide 是純javascript打造的觸屏滑動特效插件,面向手機、平板電腦等移動終端,能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

插件開源、體積小、簡單實用、功能強大,是你架構移動終端網站的重要選擇!

ps:如果你SuperSlide的使用者,那么你會發現它是那么熟悉和易用。

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對象!)  
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名稱


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM