JQuery Jcarousel插件实现横向无缝图片滚动是本文要介绍的内容，主要是了解利用JQuery来实现滚动效果， jCarousel操作jquery图片产品展示插件可以用来展示产品图片的jquery插件。
jCarousel是个非常好看又好用的内容滚动切换插件，可以实现按序水平或垂直方向的内容列表的切换。滚动切换的内容可以是静态的HTML内容，也可以是JS的对象列表，也可以是利用AJAX技术动态载入的内容。
jcarousel 使用方法 使用此插件，需要在<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">
<!-- The content goes in here -->
</ul>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
jCarousel自动生成需要的HTML标记内容。class属性标明jCarousel使用的”name”名称的外观。应用jCarousel，需要在<head>标记内增加以下代码：
<script type="text/javascript">jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Configuration goes here
})
;
});
</script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
jCarousel可以接受很多配置选项，在后面会详细说明。 jCarousel初始化成功后，生成的DOM结构如下所示：
<div>
<div>
<div disabled="disabled">
</div>
<div>
</div>
<div>
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
</div>
</div>
</div>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
你可以发现自动生成了一些有class属性的元素。你可以自己定义这些对应的class的样式。注： "jcarousel-skin-name"外观class名称被自动从<ul>上变动到了顶层的<div>元素上。在<div>中的第一个<div>元素表示一个不可用的按钮，第二个<div>元素是一个可用的按钮。
不可用按钮有一个disabled属性（实际上对<div>元素没有影响，你可以照常使用按钮元素），额外的jcarousel-prev-disabled(或者jcarousel-next-disabled)表示样式。在列表中的<li>元素都有jcarousel-item-n的样式，通过n表示在列表中的位置。class的名称都可以复用，如<ul>表示一个水平的carousel。动态内容载入使用itemLoadCallback回调方法作为一个配置选项，你可以实现动态创建<li>元素。
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
itemLoadCallback: itemLoadCallbackFunction
});});
</script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
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>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
jCarousel包含一个方便的add()方法，用于创建对应编号的元素和元素中的innerHTML字符串内容。如果元素已经存在，它只是更新元素的innerHTML字符串。你可以使用carousel.first和carousel.last变量来访问第一个和最后一个可见元素的编号值。 配置选项 jCarousel接受以下选项来控制carousel的表现和行为。从属性、类型、默认值、描述。
vertical bool false
- 1.
指定carousel是水平还是垂直方向滚动。
start integer 1
- 1.
开始的元素编号。
offset integer 1
- 1.
初始化后第一个可见的元素编号。
size integer
- 1.
如果size属性没指定，则为<li>元素的个数 元素的个数。
scroll integer 3
- 1.
每次滚动切换的元素数量。
visible integer null
- 1.
如果设置此项，元素的宽度和高度值将根据区域的宽度和高度值来重新计算，以显示此数量的元素。
animation mixed “fast”
- 1.
滚动效果的速度(“slow”或者”fast”)，也可以是毫秒的整数(参见 jQuery Documentation)。如果设置为0，关闭切换效果。
easing string null
- 1.
你想使用的缓冲效果的名字 (参见 jQuery Documentation).
auto integer 0
- 1.
指定每隔多少秒自动滚动内容。如果设置为0(默认值)将关闭自动切换。
wrap string null
- 1.
表示是否将第一个和最后一个元素实现连接效果。选项值可以是"first", "last"或者 "both"。如果设置为null，默认关闭连接效果。 你也可以设置"circular"选项实现循环效果。例子 Circular carousel 演示如何实现此效果。
initCallback function null
- 1.
在初始化carousel后调用的JavaScript函数。包含两个参数：调用函数的carousel实例对象和carousel的初始化状态(init, reset 或者reload)。
itemLoadCallback function null
- 1.
在carousel动态载入内容后调用的JavaScript函数。包含两个参数：调用函数的carousel实例对象和carousel的动作状态(prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemLoadCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
itemFirstInCallback function null
- 1.
当 某个元素成为carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对 象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemFirstInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
itemFirstOutCallback function null
- 1.
当某个元素不再是carousel显示范围的第一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemFirstOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
itemLastInCallback function null
- 1.
当某个元素成为carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemLastInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
itemLastOutCallback function null
- 1.
当某个元素不再是carousel显示范围的最后一个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemLastOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
itemVisibleInCallback function null
- 1.
当某个元素成为carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemVisibleInCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
itemVisibleOutCallback function null
- 1.
当某个元素不再是carousel显示范围的某个元素时调用的JavaScript函数(在滚动效果之后)。需要四个参数：调用函数的实例对象，<li>对象本身，元素在列表中中序号，以及carousel的动作状态 (prev, next or init)。你还可以传递一个或两个函数的列表，分别表示切换前和切换后的动作。 itemVisibleOutCallback: { onBeforeAnimation: callback1, onAfterAnimation: callback2}
buttonNextCallback function null
- 1.
当’next’按钮状态改变时调用的JavaScript函数。方法的返回值用于控制’next’按钮可用还是不可用。需要三个参数：调用函数的实例对象，按钮控件元素和该按钮是否可用的标记。
buttonPrevCallback function null
- 1.
当’previous’按钮状态改变时调用的JavaScript函数。方法的返回值用于控制’previous’按钮可用还是不可用。需要三个参数：调用函数的实例对象，按钮控件元素和该按钮是否可用的标记。
buttonNextHTML string <div></div>
- 1.
自动生成的next按钮的HTML标记。如果设置为空，不创建next按钮。
buttonPrevHTML string <div></div>
- 1.
自动生成的prev按钮的HTML标记。如果设置为空，不创建prev按钮。
buttonNextEvent string “click”
- 1.
指定触发next操作的事件名。
buttonPrevEvent string “click”
- 1.
指定触发prev操作的事件名。
兼容性 jCarousel支持以下浏览器：
Internet Explorer 6 (PC)
Internet Explorer 7 (PC)
FireFox 1.5.0.6 (PC/Mac/Linux)
Opera 9.01 (PC/Mac)
Safari 2.0.4 (Mac)
Safari 3.1.0 (PC)
Konqueror 3.4.0 (Linux)
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
小结：JQuery Jcarousel插件之横向无缝图片滚动的内容介绍完了，希望通过本文的学习能对你有所帮助！
