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

配置参数列表

例子

<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
}