Navigation

首页卡盘

Class

首页卡盘

组织 HTML 结构

<div id="demo4" class="s-demo">
    <div class="yslider-stage">
        <p><a href="#" target="_blank"><img width="405" height="220" alt="终极秒杀场" src="http://img01.taobaocdn.com/tps/i1/T1jwQdXlNaXXcDnR6U-405-220.jpg"/></a></p>
        <p><a href="#" target="_blank"><img width="405" height="220" alt="9折话费" src="http://img04.taobaocdn.com/tps/i4/T1VTsbXkxfXXcDnR6U-405-220.jpg"/></a></p>
        <p><a href="#" target="_blank"><img width="405" height="220" alt="彩票大派送" src="http://img04.taobaocdn.com/tps/i4/T15pscXoFfXXcDnR6U-405-220.jpg"/></a></p>
        <p><a href="#" target="_blank"><img width="405" height="220" alt="限量抢购" src="http://img03.taobaocdn.com/tps/i3/T1UjcdXjpaXXcDnR6U-405-220.jpg"/></a></p>
        <p><a href="#" target="_blank"><img width="405" height="220" alt="周末购" src="http://img02.taobaocdn.com/tps/i2/T1ShsdXfBaXXcDnR6U-405-220.jpg"/></a></p>
        <p><a href="#" target="_blank"><img width="405" height="220" alt="年终风暴" src="http://img01.taobaocdn.com/tps/i1/T11jIcXn8fXXcDnR6U-405-220.jpg"/></a></p>
    </div>
    <ul class="yslider-stick">
        <li class="selected"><a href="#" target="_blank">年终风暴</a></li>
        <li><a href="#" target="_blank">终极秒杀场</a></li>
        <li><a href="#" target="_blank">9折话费</a></li>
        <li><a href="#" target="_blank">彩票大派送</a></li>
        <li><a href="#" target="_blank">限量抢购</a></li>
        <li><a href="#" target="_blank">周末购</a></li>
    </ul>
</div>

JS 初始化

KISSY.use("event,switchable", function (S, Event, Switchable) {
    var Slide = Switchable.Slide;
    S.ready(function (S) {
        Slide('#demo4', {
            navCls : 'yslider-stick',
            contentCls : 'yslider-stage',
            activeTriggerCls : 'selected',
            delay : .2,
            effect : 'fade',
            easing : 'easeBoth',
            duration : .8,
            autoplay : true
        });
    });
});

Navigation