jQuery滚动切换传送插件jCarousel使用简介
1、技术目标
掌握jCarousel插件的基本操作
2、jCarousel简介
jCarousel是jQuery传送带效果插件，这类插件也比较多，选择jCarousel
因为它简单实用，支持循环slide，支持pager等等，本文通过一个最简单的
水平传送效果来介绍jCarousel插件，如图：
提示：jCarousel中文帮助文档已提供下载 (jCarousel Help.rar)
3、使用准备
3.1）创建Demo文件夹jCarousel
3.2）在jCarousel下创建文件夹images，放需要展示的图片
3.3）在jCarousel下创建文件夹js，js下放2个js文件：
jquery.js (版本v1.4.2)
jquery.jcarousel.pack.js (jCarousel插件压缩版)
3.4）在jCarousel下创建文件夹css，放置样式文件及图标文件：
jquery.jcarousel.css (基本样式)
skin.css (列表样式)
......
注意：以上文件本文已提供完整Demo下载 (jCarousel Demo.rar)
4、在jCarousel下创建carouselDemo.htm页面，使用jCarousel插件，
页面代码如下(关键部分已加入注释)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>jCarousel Demo, HotStrong提供</title>
<link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="css/skin.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript">
$(function(){
//为ul设置jCarousel插件
$("#mycarousel").jcarousel();
});
</script>
</head>
<body>
<!-- 列表项目结构，注意： ul必须使用skin.css中配置的样式-->
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><div><img src="images/dm.jpg" width="147" height="203" /></div></li>
<li><div><img src="images/dzt.jpg" width="147" height="203" /></div></li>
<li><div><img src="images/ht.jpg" width="147" height="203" /></div></li>
<li><div><img src="images/jn.jpg" width="147" height="203" /></div></li>
<li><div><img src="images/lm.jpg" width="147" height="203" /></div></li>
<li><div><img src="images/xyy.jpg" width="147" height="203" /></div></li>
</ul>
</body>
</html>
5、调整所展示项目的大小
不同的应用场合所展示的项目大小不一，可修改skin.css中的样式代码来调整项目大小，要注意浏览器兼容的问题
提示：浏览器兼容问题可参看
http://hotstrong.iteye.com/blog/1009212
skin.css代码如下(代码去掉了垂直展示的样式，调整大小的地方请参看注释)：
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #F0F6F9;
/*border: 1px solid #346F97;*/
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
/*border: 1px solid blue;*/
width: 461px;/*ul外部宽度*/
+width: 531px;/*ul外部宽度 IE7、IE8*/
padding: 10px 38px;/*外部与内部的填充*/
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
/*border: 1px solid #346F97;*/
width: 459px;/*ul内部宽度*/
height: 207px;/*ul内部高度*/
}
.jcarousel-skin-tango .jcarousel-item {
/*border: 1px solid red;*/
width: 149px;/*li宽度*/
height: 205px;/*li高度*/
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 4px;/*li之间的间隔*/
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 90px;/*下一页按钮图标上边距*/
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 90px;/*上一页按钮图标上边距*/
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
相关推荐
**jQuery图片滚动切换插件——jCarousel Lite详解** 在网页设计中，图片的展示方式多种多样，其中一种常见且吸引用户注意力的方式就是图片滚动切换效果。`jCarousel Lite`是基于jQuery的一款轻量级的图片轮播插件，...
总结起来，jQuery图片点击切换插件jCarousel以其强大的功能和易于使用的特性，成为了前端开发中的热门选择。它不仅简化了图片轮播的实现过程，还为开发者提供了广阔的创新空间。通过深入理解和灵活运用jCarousel，...
**jQuery轮播图插件jCarousel详解** 在网页设计中，动态展示图片或内容的轮播图已经成为一种常见的交互方式，有效地吸引用户注意力并优化用户体验。jCarousel是一款基于JavaScript库jQuery的轮播插件，以其易用性和...
在这个项目中，`jQuery` 被用来实现两种关键功能：图片滚动（通过 `jcarousel` 插件）和局部图片放大镜效果（通过 `jqueryzoom` 插件）。下面我们将详细介绍这两个功能及其背后的原理。 1. **`jcarousel` 插件**：`...
总之，jCarousel 是一个强大且易于使用的jQuery插件，能够帮助开发者轻松实现高质量的滚动效果。无论是图片轮播还是文字滚动，都可以通过灵活的配置和API进行定制，满足多样化的需求。通过熟练掌握jCarousel，你可以...
jCarousel 是个非常好看又好用的内容滚动切换插件，可以实现按序水平或垂直方向的内容列表的切换。 滚动切换的内容可以是静态的HTML内容，也可以是JS的对象列表，也可以是利用AJAX技术动态载入的内容。
**jQuery插件_jcarousel(用于图片滚动)** `jcarousel`是一个非常流行的jQuery插件，专为创建功能丰富的图片轮播、滑动展示和旋转木马效果而设计。它提供了高度自定义的选项，使开发者能够轻松地在网站上添加交互式...
jCarousel是一款基于jQuery的开源轮播图插件，它提供了丰富的功能和自定义选项，使开发者能够轻松创建各种各样的滑动效果，如图片滑动、内容滚动等。这个包包含了jCarousel的核心库文件和其他相关资源，为快速集成到...
jQuery 滚动广告插件是一种广泛应用于网页开发中的技术，它可以帮助开发者创建吸引人的、动态的广告展示效果。在网页设计中，滚动广告能够吸引用户的注意力，提高广告的可见性和点击率。以下是对这个主题的详细阐述...
3. 使用jQuery选择器选取ul列表，并调用jCarousel方法初始化插件，配置如自动滚动速度、是否循环等参数。 例如： ```javascript $(document).ready(function() { $('#mycarousel').jcarousel({ auto: 3, // 自动...
jCarousel 是一个非常受欢迎的 jQuery 插件，它为开发者提供了强大的功能，使他们能够创建出优雅且功能丰富的滚动列表。这款插件支持水平和垂直方向的列表展示，并且可以通过动画效果实现平滑的过渡，从而提升用户...
横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动，点一下滚动一下，这是Jquery jcarousel插件应用实用例子，演示文档虽然是HTML格式，但由代码来看，在ASP/PHP/ASP.NET中使用也很方便，而且图片...
图片滚动,jcarousel,Jquery插件 Jquery jcarousel插件应用实用：横向无缝的图片滚动，两端带左右控制按钮，需要鼠标点击按钮才会滚动，点一下滚动一下，演示文档虽然是HTML格式，但由代码来看，在ASP/PHP/中使用也...
内容索引:脚本资源,jQuery,图片滚动,jQuery插件 Jcarousel 是一款基于jQuery的多风格图片滚动插件，它可以控制成组的图片滚动，也可以设置滚动方向，横向或竖向，设置图片数量，两端带有多种风格的控制按钮。...
67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册...
jCarousel是一款基于jQuery的开源插件，主要用于创建可滚动的、水平或垂直排列的项目列表，常被应用于网站的轮播图、产品展示、新闻滚动等场景。它提供了丰富的定制选项，使开发者能够轻松地调整布局、动画效果以及...
67. 一款jQuery动感左右滚动图片切换插件带缩图一起滚动 68. 一款jQuery实现banner图片轮显、广告切换、图片幻灯插件EasySlide下载 69. 一款jquery实现图片放大插件imgBox下载 70. 一款jQuery实现漂亮精美相册...
`jCarousel` 是一个非常流行的 jQuery 插件，主要用于创建可滚动的图片或内容列表。它以其强大的功能和灵活性在网页开发中被广泛使用，尤其适用于创建滑动展示、轮播效果或产品展示等应用场景。在“jcarousel点击...