南汇电脑培训-淘宝sdk超帅图片轮播 淘小二推荐
周浦电脑培训,周浦会计培训,南汇电脑培训
所需DOM结构
本组件需要将滚动的对象作为一个ul列表，包含在外层的容器中，同时容器里还需要定义一个容器来放置列表中对应项的具体内容。
<div class="J_TWidget 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, 最朴素的显示/隐藏效果 |
| 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：鼠标经过触发 |
| hasTriggers | true/false (默认值：true) | 是否设置触发点 |
| steps | 自定义数值 (默认值：1) | 切换视图内有多少个panels |
| viewSize | 自定义值 | 切换视图区域的大小。 一般不需要设定此值，仅当获取值不正确时，用于手工指定大小 |
| activeIndex | 自定义数值 (默认值：0) | 默认激活的列表项 |
| activeTriggerCls | 自定义值 (默认值：active) | 默认激活列表项的class值 |
| duration | 自定义值（默认值：0.5） | 动画时长
.1 = 100ms |
周浦电脑培训,周浦会计培训,南汇电脑培训