最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-08-25 15:26浏览(1544)

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

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

jCarousel演示7种不同的滚动切换
分类:图片代码 > 图片插件 难易:初级
查看演示

加我微信,拉你进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

参数 描述 默认值
vertical 指定滚动切换传送带是以水平方向显示还是垂直方向显示。改变左右方向的滚动切换为上下方向。 false
start 指定起始项 1
offset 在初始化时索引的第一个可用的项。 1
size 总共的列表项数目。 Number of existing
  • elements if size is not passed explicitly
  • scroll 每次滚动切换的数目 3
    visible 如果通过,整个列表项的宽/高将会根据剪裁的宽/高计算和设定。因此整个列表项的数目将会被准确的显示出来。 null
    animation 用以确定滚动显示动画的速度,可以是某些jQuery式字符串("slow"或"fast")或是毫秒(参见jQuery文档材料)。如果设为0,则动画效果关闭。 "fast"
    easing 您想使用的缓动类型的名称(参见jQuery文档材料)。 null
    auto 指定多少秒内容定期自动滚动。如果设置为0,则自动滚动关闭。 0
    wrap 指定是否包裹第一/最后一项(或同时)并跳回到开始/结束。选项参数有"first", "last" 或"both"字符串。如果设置为null,包裹会关闭(默认)。您也可以设置"circular"作为参数使支持循环滚动显示。您可以查看实例循环滚动切换看看如何使用此参数。 null
    initCallback JavaScript函数,在滚动切换初始化后执行。需传递两个参数:一个请求的滚动切换实例参数,另外一个是滚动切换的初始化状态参数(init,reset或reload)。 null
    itemLoadCallback JavaScript函数,在滚动切换请求的些列表项加载完毕的时候执行。需要传递两个参数:一个当前请求的滚动切换的实例化对象,另外一个是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    itemFirstInCallback JavaScript函数,滚动动画执行之后,当某一列表项成为可见区域的第一项时调用。传递四个参数:一是当前滚动切换的实例对象,二是对象本身,三是用来表明当前项在列表项中位置的参数,四是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    itemFirstOutCallback JavaScript函数,滚动动画执行之后,当某一列表项不再是可见区域的第一项时调用。传递四个参数:一是当前滚动切换的实例对象,二是对象本身,三是用来表明当前项在列表项中位置的参数,四是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    itemLastInCallback JavaScript函数,滚动动画执行之后,当某一列表项成为可见区域的最后一项时调用。传递四个参数:一是当前滚动切换的实例对象,二是对象本身,三是用来表明当前项在列表项中位置的参数,四是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    itemLastOutCallback JavaScript函数,滚动动画执行之后,当某一列表项不再是可见区域的最后一项时调用。传递四个参数:一是当前滚动切换的实例对象,二是对象本身,三是用来表明当前项在列表项中位置的参数,四是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    itemVisibleInCallback JavaScript函数,滚动动画执行之后,当某一列表项进入到可见区域内时调用。传递四个参数:一是当前滚动切换的实例对象,二是对象本身,三是用来表明当前项在列表项中位置的参数,四是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    itemVisibleOutCallback JavaScript函数,滚动动画执行之后,当某一列表项已经不在可见区域内时调用。传递四个参数:一是当前滚动切换的实例对象,二是对象本身,三是用来表明当前项在列表项中位置的参数,四是滚动切换的活动状态参数(prev,next或init)。或者,您可以传递在动画之前或之后触发的一个或两个函数: itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2 } null
    buttonNextCallback JavaScript函数,在'next'控制状态改变的时候调用。此方法的职责就是启用或禁用'next'控制。需传递三个参数:一是滚动切换实例对象,二是控制的元素,三是按钮是否要被禁用的标志参数。 null
    buttonPrevCallback JavaScript函数,在'previous'控制状态改变的时候调用。此方法的职责就是启用或禁用'previous'控制。需传递三个参数:一是滚动切换实例对象,二是控制的元素,三是按钮是否要被禁用的flag标志。 null
    buttonNextHTML 自动生成下一个按钮的HTML标记。如果设为null,则没有“下一个(next-button)”按钮创建。
    buttonPrevHTML 自动生成前一个按钮的HTML标记。如果设为null,则没有“前一个(prev-button)”按钮创建。
    buttonNextEvent 指定向后滚动触发的事件。 "click"
    buttonPrevEvent 指定向前滚动触发的事件。 "click"
    声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/445.html
    评论0
    头像

    友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

    1 2