【新版旺铺装修系统】轮播实现代码

作者:阿华
点击数:

您现在的位置:暗号设计>>设计观点>>淘宝SDK模板>>
发布时间:2011年03月31日

由于老版的装修系统轮播效果过于单一,在新版旺铺装修中进行了更新、加强,建议各位设计师都使用新代码。而老的代码在新装修中将不能兼容。请各位知晓!

    由于老版的装修系统轮播效果过于单一,在新版旺铺装修中进行了更新、加强,建议各位设计师都使用新代码。而老的代码在新装修中将不能兼容。请各位知晓!
 

淘宝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