`
wan_2004
  • 浏览: 138271 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jCarousel，好用又好看的内容滚动插件

jQueryJavaScriptCSSLinuxSafari 
阅读更多

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 .

分享到：
| tomcat 启用Gzip 压缩进行优化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jCarousel图片滚动插件 jquery图片滚动

    jCarousel 是个非常好看又好用的内容滚动切换插件，可以实现按序水平或垂直方向的内容列表的切换。 滚动切换的内容可以是静态的HTML内容，也可以是JS的对象列表，也可以是利用AJAX技术动态载入的内容。

    Jcarousel jQuery 多风格图片滚动插件及示例

    内容索引:脚本资源,jQuery,图片滚动,jQuery插件　Jcarousel 是一款基于jQuery的多风格图片滚动插件，它可以控制成组的图片滚动，也可以设置滚动方向，横向或竖向，设置图片数量，两端带有多种风格的控制按钮。...

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

    jCarousel是一款 jQuery 插件， 用来控制水平或垂直排列的列表项. 这些项目（可以是静态HTML内容或是Ajax加载内容）内容是可以来回滚动的（可以有动画效果）。

    Jquery jcarousel插件应用实用：横向无缝图片滚动

    内容索引:脚本资源,jQuery,图片滚动,jcarousel,Jquery插件　Jquery jcarousel插件应用实用：横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动...本滚动插件基于jquery.jcarousel.pack.js、jquery.js

    jcarouselLazyLoading:jcarousel的插件https

    该插件将停止幻灯片滚动，直到加载下一张幻灯片为止。 下一张幻灯片准备好后，将进行滚动。 但是，如果下一张幻灯片至少部分可见（例如，使用滑动手势时），则不会推迟滚动。 特征 可配置的 适用于任何内容（视频，...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于...

    100多个JQuery效果示例（实例）div+css+javascrpit

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...

    jquery 动态示例

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与...93. 基于jQuery的横向无缝图片滚动插件jcarousel **** …… …… …… 很多很多

    JQuery&CSS;&CSS;+DIV实例大全.rar

    52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩...

Magicbox
Global site tag (gtag.js) - Google Analytics