由于老版的装修系统轮播效果过于单一,在新版旺铺装修中进行了更新、加强,建议各位设计师都使用新代码。而老的代码在新装修中将不能兼容。请各位知晓!
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
|
切换时的动画效果
|
easing | easeOutStrong/easeBoth | 滚动的动画方方式 |
countdown | true/false (默认值:false) | 是否开启倒计时样式 |
countdownFromStyle | 自定义值 | 设定倒计时最终样式
|
navCls | 自定义值 | 对其进行轮播的目标列表的class值 |
contentCls | 自定义值 | 轮播列表所对应的内容列表的class值 |
delay | 自定义数值 (默认值:1) | 延迟加载时间
|
triggerType | mouse/click<>
(默认值:mouse)br |
触发方式——
mouse:鼠标经过触发 |
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