大头盆盆

导航

Slide-卡盘效果

    <div style="width:950px;height:705px;">
        <div class="J_TWidget" data-widget-config="{&quot;circular&quot;:true,&quot;duration&quot;:0.5,&quot;easing&quot;:&quot;backBoth&quot;,&quot;activeTriggerCls&quot;:&quot;selected&quot;,&quot;effect&quot;:&quot;fade&quot;,&quot;interval&quot;:3,&quot;navCls&quot;:&quot;pan_nav&quot;,&quot;contentCls&quot;:&quot;pan_content&quot;,&quot;autoplay&quot;:true}" data-widget-type="Slide">
            <div class="pan_nav" style="float:left;width:238px;height:705px;">
                <div class="fl1" style="width:238px;height:156px;background:url(//gdp.alicdn.com/imgextra/i4/799193263/TB28Vx6nVXXXXcuXpXXXXXXXXXX_!!799193263.jpg);">
                    <div class="J_TWidget" data-widget-config="{&quot;trigger&quot;:&quot;.fl1&quot;,&quot;align&quot;:{&quot;node&quot;:&quot;.fl1&quot;,&quot;points&quot;:[&quot;tl&quot;,&quot;tl&quot;],&quot;offset&quot;:[0,0]}}" data-widget-type="Popup" style="display:none;">
                         <img width="238" height="156" data-pinit="registered" src="//gdp.alicdn.com/imgextra/i1/799193263/TB2wF9CnVXXXXa6XXXXXXXXXXXX_!!799193263.jpg" />
                    </div>
                </div>
            </div>
            <div class="pan_content" style="width:712px;height:705px;float:left;">
                <div style="width:712px;height:705px;">
                     <img src="//gdp.alicdn.com/imgextra/i2/799193263/TB2j_qLnVXXXXXBXXXXXXXXXXXX_!!799193263.jpg" alt="" border="0" style="display:block;" />
                </div>
            </div>
        </div>
    </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)

触发方式——
mouse:鼠标经过触发
click:鼠标点击触发

hasTriggers    true/false (默认值:true)    是否设置触发点
steps    自定义数值 (默认值:1)    切换视图内有多少个panels
viewSize    自定义值    切换视图区域的大小。
一般不需要设定此值,仅当获取值不正确时,用于手工指定大小

activeIndex    自定义数值 (默认值:0)    默认激活的列表项
activeTriggerCls    自定义值 (默认值:active)    默认激活列表项的class值
duration    自定义值(默认值:0.5)    动画时长
.1 = 100ms

 

posted on 2016-07-29 10:58  大头盆盆  阅读(471)  评论(0编辑  收藏  举报