<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