返回觀點列表

【新版旺鋪裝修系統】輪播實現代碼

時間:2011/03/31 作者:阿華 內容來源: taobao

    由于老版的裝修系統輪播效果過于單一,在新版旺鋪裝修中進行了更新、加強,建議各位設計師都使用新代碼。而老的代碼在新裝修中將不能兼容。請各位知曉!
 

淘寶sdk模版
 

Slide卡盤效果
所需DOM結構
本組件需要將滾動的對象作為一個ul列表,包含在外層的容器中,同事容易里還需要定義一個容器來放置列表中對應項的具體內容。外層容器有唯一的id來標示組件。


<div id="demo3" class="section">

    <div class="yslider-stage">

        <p><a href="#" target="_blank"><img src="###"/></a></p>

        <p><a href="#" target="_blank"><img src="###"/></a></p>

        <p><a href="#" target="_blank"><img src="###"/></a></p>

    </div>

    <ul class="yslider-stick">

        <li class="selected"><a href="#" target="_blank">aaa</a></li>

        <li><a href="#" target="_blank">bbb</a></li>

        <li><a href="#" target="_blank">ccc</a></li>

    </ul>

</div>



組件調用方法
<div class=”J_TWidget”  data-widget-type=”Slide”  data-widget-config=”{

'navCls': 'yslider-stick',

            'contentCls': 'yslider-stage',

            'activeTriggerCls': 'selected',

            'delay': 0.2,

            'effect': 'fade',

            'easing': 'easeBoth',

            'duration': 0.8,

            'autoplay': false,

}”>

    <!--  code  -- >

</div>



參數配置列表

 

參數配置列表

 

配置參數 參數可選值 作用說明
effect none/fade/scrolly/scrollx


(默認值:none)
 

切換時的動畫效果


none, 最樸素的顯示/隱藏效果
fade, 可實現淡隱淡現的效果
scrolly, 垂直滾動
scrollx, 水平滾動
 

easing easeOutStrong/easeBoth 滾動的動畫方方式
countdown true/false (默認值:false) 是否開啟倒計時樣式
countdownFromStyle 自定義值 設定倒計時最終樣式


如: width:15px 表示進度條最終寬度,可先在CSS里對樣式進行定義
 

navCls 自定義值 對其進行輪播的目標列表的class值
contentCls 自定義值 輪播列表所對應的內容列表的class值
delay 自定義數值 (默認值:1) 延遲加載時間


.1 == 100ms

triggerType mouse/click<>

(默認值:mouse)br
 

觸發方式——

mouse:鼠標經過觸發
click:鼠標點擊觸發
 

hasTriggers true/false (默認值:true) 是否設置觸發點
steps 自定義數值 (默認值:1) 切換視圖內有多少個panels
viewSize 自定義值 切換視圖區域的大小。


一般不需要設定此值,僅當獲取值不正確時,用于手工指定大小
 

activeIndex 自定義數值 (默認值:0) 默認激活的列表項
activeTriggerCls 自定義值 (默認值:active) 默認激活列表項的class值
duration 自定義值(默認值:0.5) 動畫時長

.1 = 100ms


輪播效果,大家可以參考ONHOO的店鋪 http://taosheji.taobao.com/

淘寶網店鋪開發者WIKI:http://wiki.zx.taobao.com/index.php/%E9%A6%96%E9%A1%B5


返回觀點列表
包租婆高手论坛六会彩