当前位置: 主页 > 学习教程 > 网页设计教程 >
周浦电脑培训
南汇电脑培训-淘宝sdk旋转木马文档说明

周浦电脑培训,周浦会计培训,南汇电脑培训
所需DOM结构

需要滚动的对象依次罗列,包含在内容区的容器中,同时需要两个不同ID的容器来分别包含上下翻页的按钮,另外可以将每一组内容再独自包含在一个ul列表中。
 

<div  class="section  J_TWidget">

    <span id="scroller-prev" class="prev disable">‹ 上一页</span>

    <span id="scroller-next" class="next">下一页 ›</span>

    <div class="scroller">

        <div class="ks-switchable-content">


            <img alt="" src="###"/>

            <img alt="" src="###"/>

	    <img alt="" src="###"/>


            <img alt="" src="###"/>

	    <img alt="" src="###"/>

	    <img alt="" src="###"/>


            <img alt="" src="###"/>

	    <img alt="" src="###"/>

	    <img alt="" src="###"/>
        </div>

        <ul class="ks-switchable-nav">

            <li class="ks-active">•</li>

            <li>•</li>

            <li>•</li>

        </ul>

    </div>

</div>

组件调用方法

<div class=”J_TWidget”  data-widget-type=”Carousel”  data-widget-config=”{

'effect': 'scrollx',

            'easing': 'easeOutStrong',

            'steps': 5,

            'viewSize': [680],

            'circular': false,

            'prevBtnCls': 'prev',

            'nextBtnCls': 'next',

            'disableBtnCls': 'disable',

  }”>

<!--  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值
circular true/false(默认:true) 滚动效果
prevBtnCls 自定义值 上一页的class值
nextBtnCls 自定义值 下一页的class值
disableBtnCls 自定义值 按钮不可用的class值
duration 自定义值(默认:0.5) 动画时长,一张图片开始切换到另一张图片显示的时间

.1 == 100ms


 

分享到: