首页 > 其他 > 详细

jCarousel使用说明文档(中文)

时间:2014-08-19 18:35:05      阅读:420      评论:0      收藏:0      [点我收藏+]

jCarousel 是个非常好看又好用的内容滚动切换插件,可以实现按序水平或垂直方向的内容列表的切换。

滚动切换的内容可以是静态的HTML内容,也可以是JS的对象列表,也可以是利用AJAX技术动态载入的内容。

使用方法

使用此插件,需要在<head>标签内引入jQuery库,jCarousel源 文件和CSS样式等:

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

 jCarousel在HTML文档中使用一个非常简单的HTML标记结构:

<ul id="mycarousel" class="jcarousel-skin-name
">
   <!-- The content goes in here -->
</ul>

 jCarousel自动生成需要的HTML标记内容。class属性标明jCarousel使用的"name"名称的外观。
应用jCarousel,需要在<head>标记内增加以下代码:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(‘#mycarousel‘).jcarousel({
        // Configuration goes here
    });
});
</script>

 动态内容载入


使用itemLoadCallback回调方法作为一个配置选项,你可以实现动态创建<li>元素。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(‘#mycarousel‘).jcarousel({
        itemLoadCallback: itemLoadCallbackFunction
    });
});
</script>

 itemLoadCallback是个JavaScript函数,当carousel载入了列表内容时被执行。
使用时需要传递两个参数:
载入列表的carousel实例对象和指示当前carousel状态的标记(‘init‘,‘prev‘或者‘next‘)。

<script type="text/javascript">
function itemLoadCallbackFunction(carousel, state)
{
    for (var i = carousel.first; i <= carousel.last; i++) {
        // Check if the item already exists
        if (!carousel.has(i)) {
            // Add the item
            carousel.add(i, "I‘m item #" + i);
        }
    }
};
</script>

 jCarousel包含一个方便的add()方法,用于创建对应编号的元素和元素中的 innerHTML字符串内容。
如果元素已经存在,它只是更新元素的innerHTML字符串。
你可以使用carousel.first和carousel.last变量来访问第一个和最后一个可见元素的编号值。

配置选项

jCarousel接受以下选项来控制carousel的表现和行为。

属性类型默认值描述
vertical bool false 指定carousel是水平还是垂直方向滚动。
start integer 1 开始的元素编号。
offset integer 1 初始化后第一个可见的元素编号。
size integer 如果size属性没指定,则为<li>元素的个数 元素的个数。
scroll integer 3 每次滚动切换的元素数量。
visible integer null 如果设置此项,元素的宽度和高度值将根据区域的宽度和高度值来重新计算,以显示此数量的元素。
animation mixed "fast" 滚动效果的速度("slow"或者"fast"),也可以是毫秒的整数(参见 jQuery Documentation )。如果设置为0,关闭切换效果。
easing string null 你想使用的缓冲效果的名字 (参见 jQuery Documentation ).
auto integer 0 指定每隔多少秒自动滚动内容。如果设置为0(默认值)将关闭自动切换。
wrap string null 表示是否将第一个和最后一个元素实现连接效果。选项值可以是"first" , "last" 或者 "both" 。如果设置为null ,默认关闭连接效果。你也可以设置"circular" 选项实现循环效果。 例子 Circular carousel 演示如何实现此效果。
initCallback function null 在初始化carousel后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象和 carousel的初始化状态(init, reset 或者reload)。
itemLoadCallback function null 在carousel动态载入内容后调用的JavaScript函数。包含两个参数:调用函数的carousel实例对象 和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemLoadCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemFirstInCallback function null 当某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参 数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemFirstInCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemFirstOutCallback function null 当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个 参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemFirstOutCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemLastInCallback function null 当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个 参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemLastInCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemLastOutCallback function null 当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四 个参数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemLastOutCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemVisibleInCallback function null 当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参 数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemVisibleInCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
itemVisibleOutCallback function null 当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参 数:调用函数的实例对象,<li>对象本身,元素在列表中中序号,以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表,分别表示切换前和切换后的动作。
itemVisibleOutCallback: {
onBeforeAnimation: callback1,
onAfterAnimation: callback2
}
buttonNextCallback function null 当‘next‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘next‘按钮可用还是不可用。 需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。
buttonPrevCallback function null 当‘previous‘按钮状态改变时调用的JavaScript函数。方法的返回值用于控制‘previous‘按钮 可用还是不可用。需要三个参数:调用函数的实例对象,按钮控件元素和该按钮是否可用的标记。
buttonNextHTML string <div></div> 自动生成的next按钮的HTML标记。如果设置为空,不创建next按钮。
buttonPrevHTML string <div></div> 自动生成的prev按钮的HTML标记。如果设置为空,不创建prev按钮。
buttonNextEvent string "click" 指定触发next操作的事件名。
buttonPrevEvent string "click" 指定触发prev操作的事件名。

jCarousel使用说明文档(中文),布布扣,bubuko.com

jCarousel使用说明文档(中文)

原文:http://www.cnblogs.com/520yun/p/3922653.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!