所需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

例子

<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;
}
最后编辑: admin  文档更新时间: 2020-05-20 16:28   作者:admin