所需DOM结构
本组件需要将滚动的对象作为一个ul列表,包含在外层的容器中,同时容器里还需要定义一个容器来放置列表中对应项的具体内容。

<div class="J_TWidget section">
    <div class="yslider-stage">
        <p><a href="#" target="_blank"><img src="###"/></a></p>
        <p><a href="#" target="_blank"><img src="###"/></a></p>
        <p><a href="#" target="_blank"><img src="###"/></a></p>
    </div>
    <ul class="yslider-stick">
        <li class="selected"><a href="#" target="_blank">aaa</a></li>
        <li><a href="#" target="_blank">bbb</a></li>
        <li><a href="#" target="_blank">ccc</a></li>
    </ul>
</div>

组件调用方法

<div class=”J_TWidget”  data-widget-type=”Slide”  data-widget-config=”{
            'navCls': 'yslider-stick',
            'contentCls': 'yslider-stage',
            'activeTriggerCls': 'selected',
            'delay': 0.2,
            'effect': 'fade',
            'easing': 'easeBoth',
            'duration': 0.8,
            'autoplay': false,
            }”>
     <!--  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值
duration 自定义值(默认值:0.5) 动画时长

.1 = 100ms

例子

<div class="J_TWidget section loading slide1" 
data-widget-type="Slide" data-widget-config="{'effect':'scrolly','easing':'easeOutStrong','countdown':true}">
<ol class="ks-switchable-content">
    <li>
        <a href="#" target="_blank">
            <img alt="" src="http://img05.taobaocdn.com/tps/i5/T1HllqXjXpXXXXXXXX-470-150.jpg"/>
        </a>
    </li>
    <li class="hidden">
        <a target="_blank" href="#">
            <img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-24/091224170529.gif"/>
        </a>
    </li>
    <li class="hidden">
        <a target="_blank" href="#">
            <img alt="" width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2009-12-29/091229160359.jpg"/>
        </a>
    </li>
    <li class="hidden">
        <a href="#" target="_blank">
            <img alt="" src="http://img01.taobaocdn.com/tps/i1/T1qS0qXhBhXXXXXXXX-470-150.jpg"/>
        </a>
    </li>
    <li class="hidden">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="150" class="holiday-logo">
            <param name="movie" value="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf"/>
            <param name="quality" value="high"/><param name="swfversion" value="8.0.0"/>
            <param name="wmode" value="opaque"/>
            <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf" 
                width="470" height="150" name="holiday-logo" class="holiday-logo">
                    <param name="wmode" value="opaque"/>
                </object>
            <!--<![endif]-->
        </object>
    </li>
</ol>
</div>
.slide1 { position: relative; width: 470px; height: 150px; border: 1px solid #B6D1E6; overflow: hidden; }
.slide1 .ks-switchable-nav { position: absolute; bottom: 5px; right: 5px; z-index: 99; }
.slide1 .ks-switchable-nav li {
    float: left;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin-left: 3px;
    background-color: #FCF2CF;
    border: 1px solid #F47500;
    color: #D94B01;
    text-align: center;
    cursor: pointer;
}
.slide1 .ks-switchable-nav li.ks-active {
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin-top: -1px;
    color: #FFF;
    background-color: #FFB442;
    font-weight: bold;
}
.slide1 .ks-switchable-content li { height: 150px; width: 470px; overflow: hidden; }
/* for countdown plugin */
.slide1 .ks-switchable-nav li,
.slide1 .ks-switchable-trigger-content {
    position: relative;
}
.slide1 .ks-switchable-trigger-mask {
    position: absolute;
    right: 0;
    width: 18px;
    height: 18px;
    background-color: #FF9415;
    visibility: hidden
}
.slide1 .ks-active .ks-switchable-trigger-mask {
    visibility: visible
}    
最后编辑: admin  文档更新时间: 2020-05-20 16:28   作者:admin