jQuery滚动切换传送插件jCarousel使用简介
程序员文章站
2023-12-22 09:49:34
...
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;
}