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

作者：阿华
点击数：

您现在的位置：暗号设计>>设计观点>>淘宝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