当前位置: 主页 > 学习教程 > 网页设计教程 >
周浦电脑培训
南汇电脑培训-淘宝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, 最朴素的显示/隐藏效果
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

周浦电脑培训,周浦会计培训,南汇电脑培训
 

分享到: