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>
jCarousel可以接受很多配置选项,在后面会详细说明。
jCarousel初始化成功后,生成的DOM结构如下所示:
<div class="jcarousel-skin-name
">
<div class="jcarousel-container">
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
<div class="jcarousel-clip">
<ul class="jcarousel-list">
<li class="jcarousel-item-1">First item</li>
<li class="jcarousel-item-2">Second item</li>
</ul>
</div>
</div>
</div>
你可以发现自动生成了一些有class属性的元素。你可以自己定义这些对应的class的样式。
注:
"jcarousel-skin-name
"外观class名称被自动从<ul>上变动到了顶层的<div>元素上。
在<div class="jcarousel-container">中的第一个<div>元素表示一个不可用的按钮,
第二个<div>元素是一个可用的按钮。
不可用按钮有一个disabled属性(实际上对<div>元素没有影响,你可以照常使用按钮元素),
额外的jcarousel-prev-disabled(或者jcarousel-next-disabled)表示样式。
在列表中的<li>元素都有jcarousel-item-n
的样式,通过n表示在列表中的位置。
class的名称都可以复用,如<ul class="jcarousel-list jcarousel-list-horizontal">
表示一个水平的carousel。
动态内容载入
使用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支持以下浏览器:
- 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)
项目组
Thanks to John Resig
for his fantastic jQuery
library.
jCarousel is inspired by the Carousel
Component
written by Bill Scott
.
分享到:
相关推荐
jCarousel 是个非常好看又好用的内容滚动切换插件,可以实现按序水平或垂直方向的内容列表的切换。 滚动切换的内容可以是静态的HTML内容,也可以是JS的对象列表,也可以是利用AJAX技术动态载入的内容。
**jQuery 插件 jCarousel 滚动效果详解** jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作,动画效果以及事件处理。jCarousel 是一款基于jQuery的插件,专门用于创建各种类型的滚动效果,...
jCarousel 是一个非常受欢迎的 jQuery 插件,它为开发者提供了强大的功能,使他们能够创建出优雅且功能丰富的滚动列表。这款插件支持水平和垂直方向的列表展示,并且可以通过动画效果实现平滑的过渡,从而提升用户...
在下载的压缩包 `Jquery.jqueryzoom+jcarousel+实现图片滚动和局部图片放大镜效果.rar` 中,应包含以下内容: - `jquery.js` 或 `jquery.min.js`:基础的 jQuery 库文件。 - `jcarousel.js` 或 `jcarousel.min.js`:...
`jCarousel` 是一个非常流行的 jQuery 插件,主要用于创建可滚动的图片或内容列表。它以其强大的功能和灵活性在网页开发中被广泛使用,尤其适用于创建滑动展示、轮播效果或产品展示等应用场景。在“jcarousel点击...
**jQuery滚动切换传送插件jCarousel使用指南** jCarousel是一款基于jQuery库的高效、灵活且功能丰富的滚动切换插件,适用于创建各种类型的轮播、滚动列表或者产品展示。这款插件以其简单易用的API和丰富的自定义...
内容索引:脚本资源,jQuery,图片滚动,jQuery插件 Jcarousel 是一款基于jQuery的多风格图片滚动插件,它可以控制成组的图片滚动,也可以设置滚动方向,横向或竖向,设置图片数量,两端带有多种风格的控制按钮。...
jCarousel是一款基于jQuery的开源轮播图插件,它提供了丰富的功能和自定义选项,使开发者能够轻松创建各种各样的滑动效果,如图片滑动、内容滚动等。这个包包含了jCarousel的核心库文件和其他相关资源,为快速集成到...
**jQuery轮播图插件jCarousel详解** 在网页设计中,动态展示图片或内容的轮播图已经成为一种常见的交互方式,有效地吸引用户注意力并优化用户体验。jCarousel是一款基于JavaScript库jQuery的轮播插件,以其易用性和...
内容索引:脚本资源,jQuery,图片滚动,jcarousel,Jquery插件 Jquery jcarousel插件应用实用:横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动...本滚动插件基于jquery.jcarousel.pack.js、jquery.js
2. 第三方插件:例如,`jCarousel`、`bxSlider` 或 `Slick Slider` 等,这些插件已经封装好了滚动广告所需的大部分功能,只需要根据需求进行配置即可。 3. 自定义开发:对于有特殊需求的开发者,可以基于 jQuery ...
这段代码将对ID为'mycarousel'的元素应用jCarousel插件,并设置为水平展示,每次显示3张图片,每次滚动1张。 jCarousel的HTML结构通常包含一个ul列表,其中li元素表示每张图片或内容。CSS样式则用来控制图片的布局...
`jCarousel`是基于jQuery的一个优秀插件,专门用于创建高质量的轮播和滚动效果。它提供了丰富的自定义选项,可以轻松地调整滑动速度、方向、自动播放、导航箭头和指示器等多种特性。`jCarousel`的兼容性极佳,可以在...
本文将详细介绍13个基于jQuery的内容滚动插件和教程,帮助你掌握如何在网页设计中应用这一技术。 首先,我们需要注意的是,jQuery是一个快速、小巧、功能丰富的JavaScript库,它极大地简化了HTML文档遍历、事件处理...
"jcarousel"是一款广泛应用于网页开发中的jQuery插件,它主要用于实现水平或垂直方向上的图片滚动效果,可以优雅地展示一系列图片或者内容,为用户提供互动式的浏览体验。这个"脚本实例"着重展示了如何在实际项目中...
它可以处理一系列图片或内容,通过自动或手动滚动来展示这些元素,为用户带来流畅的交互体验。 2. **主要特点** - **多方向滚动**:Jcarousel支持水平和垂直滚动,可以根据设计需求轻松调整。 - **自定义样式**:...
**jCarousel** 是一个流行的JavaScript库,用于创建可滚动、响应式的图像或内容滑块。这个压缩包"jcarousel_脚本实例_源码.zip"包含的资源是开发者用来理解和应用jCarousel脚本的实例代码和源代码。下面将详细探讨...
该插件将停止幻灯片滚动,直到加载下一张幻灯片为止。 下一张幻灯片准备好后,将进行滚动。 但是,如果下一张幻灯片至少部分可见(例如,使用滑动手势时),则不会推迟滚动。 特征 可配置的 适用于任何内容(视频,...
**jsor-jcarousel** 是一个基于JavaScript的开源项目,用于创建功能丰富的滑动轮播插件,主要用于网页上的图片或内容展示。这个特定的版本是`0.2.9-0-g8e3df57`,这表明它是版本0.2.9的一个修订版,其中`g8e3df57`是...