Slide-卡盘效果
<div style="width:950px;height:705px;"> <div class="J_TWidget" data-widget-config="{"circular":true,"duration":0.5,"easing":"backBoth","activeTriggerCls":"selected","effect":"fade","interval":3,"navCls":"pan_nav","contentCls":"pan_content","autoplay":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="{"trigger":".fl1","align":{"node":".fl1","points":["tl","tl"],"offset":[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