所需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, 最朴素的显示/隐藏效果 |
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:鼠标经过触发 |
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 |
例子
<div id="J_MallSlide" class="mall-slide J_TWidget dd"
data-widget-type="Carousel"
data-widget-config="{'navCls':'ks-switchable-nav','contentCls':'ks-switchable-content','effect': 'scrollx',
'easing': 'easeOutStrong', 'steps':1, 'viewSize': [450], 'circular': false,
'prevBtnCls': 'mall-prev', 'nextBtnCls': 'mall-next', 'disableBtnCls': 'disable' }">
<a title="上一页" href="javascript:void(0);" hidefocus="true" class="mall-prev"></a>
<a title="下一页" href="javascript:void(0);" hidefocus="true" class="mall-next"></a>
<div id="J_Carousel" class="mall-content clearfix" >
<ul class="ks-switchable-content">
<li class="big-piclist">
<style>
#J_DirectPromo_129 a {
width: 440px;
}
</style>
<span data-resid="129" class="J_DirectPromo" id="J_DirectPromo_129">
<a target="_blank" href="#" style="width: 440px; height: 137px;">
<img src="http://img04.taobaocdn.com/tps/i4/T1nd86XeVeXXXXXXXX-440-135.jpg" alt="不涨反降 洗护新品新体验">
</a>
</span>
</li>
<li class="big-piclist">
<span data-resid="127" class="J_DirectPromo" id="J_DirectPromo_127">
<a target="_blank" href="#">
<img src="http://img01.taobaocdn.com/tps/i1/T1P0R6Xc4kXXXXXXXX-110-135.png" alt="潮潮了事">
</a>
</span>
<a target="_blank" href="#">
<img src="http://img04.taobaocdn.com/tps/i4/T1.JV6XcXjXXXXXXXX-110-135.png" alt="闪耀指针">
</a>
<a target="_blank" href="#">
<img src="http://img02.taobaocdn.com/tps/i2/T1YcN6XoloXXXXXXXX-110-135.png" alt="浓情午后">
</a>
<a target="_blank" class="last" href="#">
<img src="http://img02.taobaocdn.com/tps/i2/T1jdx6Xd4oXXXXXXXX-110-135.png" alt="五折包邮">
</a>
<!--end-->
</li>
<li class="big-piclist">
<span data-resid="128" class="J_DirectPromo" id="J_DirectPromo_128">
<a target="_blank" href="#">
<img src="http://img02.taobaocdn.com/tps/i2/T1S006XiVdXXXXXXXX-110-135.png" alt="周年庆祝">
</a>
</span>
<a target="_blank" href="#">
<img src="http://img02.taobaocdn.com/tps/i2/T1TZ06XkBqXXXXXXXX-110-135.png" alt="3.8折体验">
</a>
<a target="_blank" href="#">
<img src="http://img02.taobaocdn.com/tps/i2/T1yKF6XcVdXXXXXXXX-110-135.png" alt="免单回馈">
</a>
<a target="_blank" class="last" href="#">
<img src="http://img03.taobaocdn.com/tps/i3/T1qx85XotyXXXXXXXX-110-135.png" alt="新鲜搭配">
</a>
<!--end-->
</li>
</ul>
<ul class="ks-switchable-nav">
<li class="ks-active">
<img src='http://img04.taobaocdn.com/tps/i4/T1nd86XeVeXXXXXXXX-440-135.jpg' />
</li>
<li>
<img src='http://img04.taobaocdn.com/tps/i4/T1C206XdhvXXXXXXXX-130-50.jpg' />
</li>
<li>
<img src='http://img03.taobaocdn.com/tps/i3/T1CL06XdpvXXXXXXXX-120-50.jpg' />
</li>
</ul>
</div>
</div>
li{
list-style:none;
}
.content{
width:680px;
border:solid 1px
}
img{
border:none;
}
.mall-slide .ks-switchable-nav{
margin-top:140px;
width:460px;
overflow:hidden;
}
.mall-slide .ks-switchable-nav li{
float:left;
width:130px;
height:50px;
overflow:hidden;
margin-right:15px;
border:solid 1px #FFFFFF;
cursor:pointer;
}
.mall-slide .ks-switchable-nav li.ks-active{
border:solid 1px red;
}
.mall-slide .ks-switchable-nav li img{
width:150px;
height:50px;
}
.mall-slide {
border-bottom: 1px solid #E5E5E5 !important;
border-left: 1px solid #D8D8D8;
border-right: 1px solid #D8D8D8;
border-top: 1px solid #D8D8D8;
height: 200px;
position: relative;
width: 489px;
}
.mall-slide .mall-prev {
background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif") no-repeat scroll 0 -109px transparent;
display: block;
height: 137px;
left: 0;
position: absolute;
width: 25px;
}
.mall-slide .mall-next {
background: url("http://a.tbcdn.cn/p/fp/2011a/assets/sprites.gif") no-repeat scroll -25px -109px transparent;
display: block;
height: 137px;
position: absolute;
right: 0;
width: 25px;
}
.mall-slide .mall-prev:hover {
background-position: 0 -246px;
}
.mall-slide .mall-next:hover {
background-position: -25px -246px;
}
.mall-slide .mall-content {
background: -moz-linear-gradient(center top , #ECECEC, #FFFFFF) repeat scroll 0 0 transparent;
height: 200px;
left: 25px;
overflow: hidden;
position: absolute;
width: 439px;
}
.mall-slide li.big-piclist {
display: block;
float: left;
height: 137px;
overflow: hidden;
width: 440px;
}
.mall-slide .big-piclist a {
display: block;
float: left;
height: 137px;
margin-right: 1px;
overflow: hidden;
width: 109px;
}
.mall-slide .big-piclist img {
}
.mall-slide .big-piclist a.last {
margin-right: 0;
width: 110px;
}
.mall-slide .sm-piclist {
margin-left: -1px;
margin-top: 0;
}
.bt-none {
border-top: 0 none !important;
}
.bl-none {
border-left: 0 none !important;
}
.mall-slide .sm-piclist a {
background-color: white;
border-left: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
display: block;
float: left;
height: 44px;
overflow: hidden;
padding-top: 1px;
width: 87px;
}
.mall-slide .sm-piclist a.last {
}
.mall-slide .sm-piclist a:hover {
border-bottom: 2px solid #B81426;
height: 42px;
}
.tb-slide {
border: 1px solid #D8D8D8;
}
.tb-slide, .tb-slide li {
font-size: 0;
height: 170px;
overflow: hidden;
width: 490px;
}
.main-promo .loading-s .tb-slide-list li {
background: url("http://img02.taobaocdn.com/tps/i2/T16WJqXaXeXXXXXXXX-32-32.gif") no-repeat scroll 50% 50% transparent;
}
.tb-slide-triggers {
bottom: 5px;
height: 18px;
padding-top: 2px;
position: absolute;
right: 5px;
z-index: 10;
}
.tb-slide-triggers li {
-moz-border-radius: 20px 20px 20px 20px;
background-color: #FFFFFF;
color: #DE7D4B;
cursor: pointer;
float: left;
font-size: 13px;
height: 20px;
line-height: 20px;
margin-left: 3px;
margin-top: -2px;
opacity: 0.7;
overflow: visible;
position: relative;
text-align: center;
width: 20px;
}
.tb-slide-triggers li.ks-active {
background-color: #FF6600;
color: #FFFFFF;
filter: none;
font-weight: bold;
opacity: 1;
}