旋转木马(二)

Class

旋转木马(二)

组织 HTML 结构

<div id="J_TinySlide" class="s-demo tiny-slide-wrap">
    <div class="tiny-hd pr">
        <a class="sk-title" href="http://try.taobao.com/index.htm?id=try2">
            <img src="http://a.tbcdn.cn/p/fp/2011a/assets/space.gif"/>
        </a>
        <h3>(18240件免费商品)</h3>

        <a title="上一页" href="javascript:void(0);" hidefocus="true" class="tiny-prev" id="J_TinyPrev"></a>

        <a title="下一页" href="javascript:void(0);" hidefocus="true" class="tiny-next" id="J_TinyNext"></a>
    </div>
    <div class="tiny-slide-content clearfix" data-active-index="1" style="position: relative;">
        <ol class="ks-switchable-content" style="position: absolute; width: 288px;left:0px; ">

            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.1&SPM=1.55010.103950.1.0.0.0&item_id=593722" class="tiny-pic"><img alt="欧美经典鳄鱼纹包" width="122" height="100" src="http://img03.taobaocdn.com/tps/i3/T14eycXeXXXXXXXXXX-122-100.jpg"></a>
                <p class="des">欧美经典鳄鱼纹包</p>
                <p class="price">原价:374</p>

                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.2&SPM=1.55010.103950.2.0.0.0&item_id=593722"></a></p>
            </li>
            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.3&SPM=1.55010.103950.3.0.0.0&item_id=608713" class="tiny-pic"><img alt="新款无叶风扇" width="122" height="100" src="http://img02.taobaocdn.com/tps/i2/T1SeycXepXXXXXXXXX-122-100.jpg"></a>
                <p class="des">新款无叶风扇</p>
                <p class="price">原价:498</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.4&SPM=1.55010.103950.4.0.0.0&item_id=608713"></a></p>
            </li>

            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.5&SPM=1.55010.103950.5.0.0.0&item_id=570730" class="tiny-pic"><img alt="波西米亚抹胸长裙" width="122" height="100" src="http://img04.taobaocdn.com/tps/i4/T17KycXd4XXXXXXXXX-122-100.jpg"></a>
                <p class="des">波西米亚抹胸长裙</p>
                <p class="price">原价:97</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.6&SPM=1.55010.103950.6.0.0.0&item_id=570730"></a></p>
            </li>
            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.7&SPM=1.55010.103950.7.0.0.0&item_id=608721" class="tiny-pic"><img alt="触摸板无线键盘" width="122" height="100" src="http://img01.taobaocdn.com/tps/i1/T1XuCcXd0XXXXXXXXX-122-100.jpg"></a>

                <p class="des">触摸板无线键盘</p>
                <p class="price">原价:348</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.8&SPM=1.55010.103950.8.0.0.0&item_id=608721"></a></p>
            </li>
            <li class="tiny-item" style="display: block; float: left;">
                <a href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.9&SPM=1.55010.103950.9.0.0.0&item_id=546704" class="tiny-pic"><img alt="奕而乐笔记本冰座" width="122" height="100" src="http://img01.taobaocdn.com/tps/i1/T1RKycXepXXXXXXXXX-122-100.jpg"></a>
                <p class="des">奕而乐笔记本冰座</p>

                <p class="price">原价:59</p>
                <p class="full"><a class="btn" href="http://try.taobao.com/item/item_detail.htm?TBG=55010.103950.10&SPM=1.55010.103950.10.0.0.0&item_id=546704"></a></p>
            </li>

        </ol>
    </div>
    <ul class="ks-switchable-nav">
        <li class="ks-active">1</li>
    </ul>
</div>

JS 初始化

通过容器元素的 id 和相关配置, 构建 Carousel 对象 :

 KISSY.use("switchable", function(S,Switchable) {
    //通过DOM元素新建旋转木马
    var tiny_slide = new Switchable.Carousel('#J_TinySlide', {
        activeIndex: 0,
        effect: 'scrollx',
        easing: 'easeOutStrong',
        viewSize: [274],
        circular: true,
        prevBtnCls: 'tiny-prev',
        nextBtnCls: 'tiny-next',
        interval: 6,
        lazyDataType: 'img-src' //延迟加载图片?
    });
});