这篇文章发布于 2009年12月25日,星期五,10:33,归类于 jQuery相关。 阅读 157525 次, 今日 1 次 21 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=477
jCarousel是一款历史悠久,功能强大的图片或文字等列表内容滚动切换显示的插件。
以下是关于此插件的一些讲解与说明。
jCarousel – jQuery下的滚动切换传送插件
作者: Jan Sorgalla
版本: 0.2.3 (更新日志)
下载: jcarousel.tar.gz或jcarousel.zip(英文原版),或是jcarousel_zh.zip(中文版)
许可: MIT 和 GPL 双授权许可。
一、内容 – 目录
二、简要介绍
jCarousel是一款 jQuery 插件, 用来控制水平或垂直排列的列表项. 这些项目(可以是静态HTML内容或是Ajax加载内容)内容是可以来回滚动的(可以有动画效果)。
三、demo实例页面们
下面的一些实例页面展示了jCarousel插件可能的潜力:
- 通过JavaScript加载滚动切换的动态内容
- 通过Ajax加载滚动切换的动态内容
- 通过Ajax从PHP脚本加载滚动切换的动态内容
- 通过Ajax从Flickr照片订阅中加载滚动切换的动态内容
- 通过Ajax从Flickr API中加载滚动切换的动态内容
四、入门指南
想要使用这款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
(本篇完)
- 文本框/域文字提示自动显示隐藏jQuery小插件 (0.293)
- HTML CSS列表元素ul,ol,dl的研究与应用 (0.262)
- jQuery-innerfade内部列表自动淡入淡出插件 (0.208)
- Ajax Upload多文件上传插件翻译及中文演示 (0.178)
- jquery之图片左右切换动画效果 (0.177)
- jQuery Lightbox(balupton版)图片展示插件讲解 (0.156)
- CORS ajax跨域请求php简单完整案例一则 (0.135)
- jQuery Pagination Ajax分页插件中文详解 (0.105)
- jQuery powerSwitch万能slide(切换)插件 (0.104)
- 介绍:cssrefresh.js-CSS文件自动刷新 (0.101)
- 小tip: 外链地址网站标志图标API应用 (RANDOM - 0.014)
您好,因為最近在做responsive
這個效果能不能做到判斷流覽器寬度去改變他的vertical的值?
我希望他在用電腦看的時候是直的 vertical:true
用手機看是橫的
謝謝
经常用jcarousel,非常感谢作者;
今天在用的时候,总是不能完全调用js,调试了半天才发现是jquery 1.9.1的问题
jcarousel和1.9.1不兼容
和 jQ 1.10.1 不兼容
你好 ! 我页面上有多个 jCarousel 它的 高 宽 都不是一样的 怎么办??,
现在这个jCarousel 的样式 名称 是固定死了的 必须是那个几个样式名称 才可以用。
这个好象不能做 1/10 这样的效果
我想主动通过ajax异步添加内容进去,页面加载完后会先有一部分的Li,然后通过ajax,不断的去添加li,但是添加进去的li不生效,弄了一个下午还是不知道该从哪里下手,可以帮我解答一下吗?
循环滚动怎么没反应啊?请教师怎么回事
很好 我刚好急需要这个东西,,谢谢啦
出现 :jCarousel:No width/height set for items. This will cause an infinite loop.Aborting… 提示 可能是“ li ” 没设置 高度和宽度
感谢博主分享,实际应用中我经常用这个,不错的。顶一个
请教一个问题 就是iphone等触摸移动设备 像safari这样的浏览器 那样的在屏幕波动 实现图片文本滚动 是在这个基础上增加 什么事件实现的?
可以让他循环滚动吗?
如7楼所说的,当父级元素DIV设置成隐藏的时候,就会有“jCarousel:No width/height set for items. This will cause an infinite loop.Aborting…;当触发一个display:black后,li里的东西就不知道哪里去了···”这样的问题,不知道这个该如何解决,有办法吗?
jcarousel插件..当没有的时候,右边的箭头不会变灰,还可以点.怎么修改一下啊~
发现当jcarousel的父级元素加载的时候设置成disploy:none,就会jCarousel:No width/height set for items. This will cause an infinite loop.Aborting…;当触发一个display:black后,li里的东西就不知道哪里去了···
649449143@qq.com 这是我的邮箱,希望您的帮助!
请问:jcarousel如何获得元素啊?
来了这儿就不想走了 确实不错 鑫哥出品 必属精品
我有个问题想请教下!
这是我的代码:
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信息框还不影响我的功能。谢谢您!
虽然我不清楚您所说的具体情况,但我猜想,应该是您的列表元素的父标签宽度或高度没有设置的原因,在插件的自带的skin.css 皮肤CSS样式文件中是设置了宽度(水平)与高度(垂直)的。例如垂直的切换有这么句样式:
.jcarousel-skin-tango .jcarousel-container-vertical {
height:245px;
padding:40px 20px;
width:75px;
}
这里的样式height:245px是关键,内部的列表元素需要根据这个高度和显示的数目计算自身的高度,如果此高度缺失,列表项将无法确定自身的高宽,位置等,于是会有弹出框报错。如果是水平滚动切换,则宽度值就是关键。
您可以看看是不是您把这个重要的高度(或宽度)样式弄丢了。
申请链接:
JavaChen
http://www.javacehn.com/