jCarousel演示7种不同的滚动切换

JCarouselLite是一款jquery插件，可以控制文档元素滚动，丰富的参数设置可以控制滚动的更多细节，是一款功能强大的滚动插件。

淘建站为您提供更多_图片代码_图片插件_滚动_垂直，在此特别感谢您对我们的支持与厚爱！

引入jcarousel相关组件

<script type="text/javascript" src="../lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="../lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../lib/jquery.jcarousel.css" />

演示一：基本滚动切换

<ul id="mycarousel" class="jcarousel-skin-tango">
    <li><img src="http://www.sucaiq.com/Public/images/other/service.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://www.sucaiq.com/Public/images/other/mobile.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://www.sucaiq.com/Public/images/other/mall.jpg" width="75" height="75" alt="" /></li>
</ul>

jQuery('#mycarousel').jcarousel();

演示二：垂直滚动切换

jQuery('#mycarousel').jcarousel({
    vertical: true,
    scroll: 2
});

演示三：自动滚动

jQuery('#mycarousel').jcarousel({
    auto: 2,
    wrap: 'last',
    initCallback: mycarousel_initCallback
});

演示四：回调函数

jQuery('#mycarousel').jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    reloadCallback: mycarousel_reloadCallback,
    buttonNextCallback: mycarousel_buttonNextCallback,
    buttonPrevCallback: mycarousel_buttonPrevCallback,
    itemFirstInCallback: mycarousel_itemFirstInCallback,
    itemFirstOutCallback: mycarousel_itemFirstOutCallback,
    itemLastInCallback: mycarousel_itemLastInCallback,
    itemLastOutCallback: mycarousel_itemLastOutCallback,
    itemVisibleInCallback: {
        onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
        onAfterAnimation: mycarousel_itemVisibleInCallbackAfterAnimation
    },
    itemVisibleOutCallback: {
        onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
        onAfterAnimation: mycarousel_itemVisibleOutCallbackAfterAnimation
    }
});

演示五：含外部控制的滚动切换

jQuery("#mycarousel").jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
});

演示六：有自定义起始位置的滚动切换

jQuery('#mycarousel').jcarousel({
    start: 3
});

演示七：多个滚动切换

jQuery('.first-and-second-carousel').jcarousel();
jQuery('#third-carousel').jcarousel({
    vertical: true
});

jCarousel中文API