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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

引入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.erdangjiade.com/Public/images/other/service.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://www.erdangjiade.com/Public/images/other/mobile.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://www.erdangjiade.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