jQuery图片文本滚动切换插件jCarousel中文翻译与详解

这篇文章发布于 2009年12月25日，星期五，10:33，归类于 jQuery相关。 阅读 158178 次, 今日 4 次 21 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=477

jCarousel是一款历史悠久，功能强大的图片或文字等列表内容滚动切换显示的插件。
图片滚动切换显示插件

以下是关于此插件的一些讲解与说明。

jCarousel – jQuery下的滚动切换传送插件

一、内容 – 目录

  1. 介绍
  2. 示例
  3. 入门指南
  4. 动态内容加载
  5. 配置
  6. 兼容性
  7. 致谢

二、简要介绍

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

三、demo实例页面们

下面的一些实例页面展示了jCarousel插件可能的潜力:

四、入门指南

想要使用这款jCarousel组件，需要include jQuery库， jCarousel资源文件, jCarousel core 核心样式表文件以及jCarousel皮肤样式表文件，该文件在您的HTML文档<head>标签之内。

<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皮肤“名称”应用于滚动切换上。

为了设置jCarousel, 在您的HTML文档的<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除外）。您可以根据上面您看到的些样式设计您自己的滚动切换的表现。

注意：

  • 皮肤class "jcarousel-skin-name" 已经从<ul>移到的顶部的<div>元素上了。
  • 实例中，<div class="jcarousel-container">下第一个嵌套的<div>是个不可用的按钮，第二个可用。这个不可使用的按钮有个disabled属性（对于<div>而言有些不合理，但是您可以使用<button>元素或者其他您想要的元素）和附加的class类jcarousel-prev-disabled或（jcarousel-next-disabled）。
  • 列表中每个<li>元素都有jcarousel-item-n这个特定的class。其中这个n代表了当前元素在列表中的位置
  • 这里没有显示的是，所有class类后面附加的后缀是由滚动切换的方向决定的。例如： <ul class="jcarousel-list
    jcarousel-list-horizontal">    表水平方向上的传送切换。

五、动态内容加载

通过itemLoadCallback的回调函数作为配置选项，你可以动态地创建<li>项添加到内容中。

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

itemLoadCallbackFunction 是一个JavaScript函数，这个函数在滚动切换需要的些选项即将被加载完毕的时候调用。传递了两个参数：请求的滚动切换实例参数和显示当前滚动切换状态的标志(‘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接受一系列的参数来控制滚动切换传送带的外观和行为。篇幅原因，具体参数请看这里： 配置参数信息

七、兼容性

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)

八、致谢

感谢John Resig 和他的不可思议的jQuery库。
jCarousel的灵感来自Carousel Component，由Bill Scott书写。

九、最后一点作者的话

翻译水平有限，如果不准确的地方欢迎指出。您可以狠狠地点击这里：中文翻译完整demo(136K)

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=477

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , , , , , , , ,


发表评论（目前21 条评论）

  1. kid说道：
    2013年07月26日 14:20

    您好，因為最近在做responsive
    這個效果能不能做到判斷流覽器寬度去改變他的vertical的值?

    我希望他在用電腦看的時候是直的 vertical:true
    用手機看是橫的

    謝謝

    回复
  2. 一月说道：
    2013年04月22日 16:11

    经常用jcarousel，非常感谢作者；
    今天在用的时候，总是不能完全调用js，调试了半天才发现是jquery 1.9.1的问题
    jcarousel和1.9.1不兼容

    回复
  3. 331289042@qq.com说道：
    2013年01月7日 10:02

    你好 ！ 我页面上有多个 jCarousel 它的 高 宽 都不是一样的 怎么办？？，
    现在这个jCarousel 的样式 名称 是固定死了的 必须是那个几个样式名称 才可以用。

    回复
  4. 阿牛说道：
    2012年10月31日 16:51

    这个好象不能做 1/10 这样的效果

    回复
  5. 明说道：
    2012年08月9日 21:16

    我想主动通过ajax异步添加内容进去，页面加载完后会先有一部分的Li,然后通过ajax，不断的去添加li，但是添加进去的li不生效，弄了一个下午还是不知道该从哪里下手，可以帮我解答一下吗？

    回复
  6. 李婷说道：
    2012年05月24日 16:35

    循环滚动怎么没反应啊？请教师怎么回事

    回复
  7. hbzsjt说道：
    2011年12月19日 20:18

    很好 我刚好急需要这个东西，，谢谢啦

    回复
  8. Andykeh说道：
    2011年10月18日 23:44

    出现 ：jCarousel:No width/height set for items. This will cause an infinite loop.Aborting… 提示 可能是“ li ” 没设置 高度和宽度

    回复
  9. 女人心说道：
    2011年09月27日 14:07

    感谢博主分享，实际应用中我经常用这个，不错的。顶一个

    回复
  10. 张文毅说说道：
    2011年08月30日 09:10

    请教一个问题 就是iphone等触摸移动设备 像safari这样的浏览器 那样的在屏幕波动 实现图片文本滚动 是在这个基础上增加 什么事件实现的？

    回复
  11. 杨晓峰说道：
    2011年07月20日 20:12

    可以让他循环滚动吗？

    回复
  12. 洪东说道：
    2011年07月6日 09:17

    如7楼所说的，当父级元素DIV设置成隐藏的时候，就会有“jCarousel:No width/height set for items. This will cause an infinite loop.Aborting…;当触发一个display：black后，li里的东西就不知道哪里去了···”这样的问题，不知道这个该如何解决，有办法吗？

    回复
  13. hiseab说道：
    2010年12月9日 14:30

    jcarousel插件..当没有的时候,右边的箭头不会变灰,还可以点.怎么修改一下啊~

    回复
  14. 张玉洁说道：
    2010年09月3日 10:17

    发现当jcarousel的父级元素加载的时候设置成disploy:none，就会jCarousel:No width/height set for items. This will cause an infinite loop.Aborting…;当触发一个display：black后，li里的东西就不知道哪里去了···

    回复
  15. 滕美亭说道：
    2010年08月18日 11:15

    649449143@qq.com 这是我的邮箱，希望您的帮助！

    回复
  16. 滕美亭说道：
    2010年08月18日 10:12

    请问：jcarousel如何获得元素啊？

    回复
  17. 您的博客 太牛了说道：
    2010年06月16日 13:52

    来了这儿就不想走了 确实不错 鑫哥出品 必属精品

    回复
  18. renym说道：
    2009年12月30日 12:41

    我有个问题想请教下！
    这是我的代码：
    jQuery(document).ready(function() {
    jQuery(‘.first-and-second-carousel’).jcarousel();
    jQuery(‘#third-carousel’).jcarousel({
    vertical: true
    });
    });

    <a href="productInfo.php?id=&menuCd=&titleCode=B01&act=content1″ target=”_blank” style=”width:75; height:5;”>

    jquery.jcarousel.css：
    .jcarousel-list li,.jcarousel-item {
    float: left;
    list-style: none;
    width: 175px;
    height: 20px;
    }
    问题：
    有alert弹出，信息内容是：jCarousel:No width/height set for items. This will cause an infinite loop.Aborting…
    失败方案：我把jquery.jcarousel.pack.js的alert修改成isNan，alert信息框是不弹出了，但我的部分功能失效了。
    请求您的帮助，怎样才能彻底的消灭alert信息框还不影响我的功能。谢谢您！

    回复
    • 张 鑫旭说道：
      2009年12月31日 02:46

      虽然我不清楚您所说的具体情况，但我猜想，应该是您的列表元素的父标签宽度或高度没有设置的原因，在插件的自带的skin.css 皮肤CSS样式文件中是设置了宽度（水平）与高度（垂直）的。例如垂直的切换有这么句样式：
      .jcarousel-skin-tango .jcarousel-container-vertical {
      height:245px;
      padding:40px 20px;
      width:75px;
      }
      这里的样式height:245px是关键，内部的列表元素需要根据这个高度和显示的数目计算自身的高度，如果此高度缺失，列表项将无法确定自身的高宽，位置等，于是会有弹出框报错。如果是水平滚动切换，则宽度值就是关键。
      您可以看看是不是您把这个重要的高度（或宽度）样式弄丢了。

      回复
  19. javachen说道：
    2009年12月26日 12:24

    申请链接：
    JavaChen
    http://www.javacehn.com/

    回复