jQuery滚动切换传送插件jCarousel使用简介

HotStrong

浏览: 509426 次
性别:
来自: 成都

最近访客更多访客>>

一往无前bhz

草料场

dahai533418

dongguangming88

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

5、HTML/JavaScript

jCarousel carousel 滚动切换传送

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;
}

jCarousel_Demo.rar (778.4 KB)
下载次数: 250

jCarousel_Help.rar (144.8 KB)
下载次数: 113

7
顶

1
踩

分享到：

如何选择技术参考书 | Spring AOP 完成日志记录

2012-02-01 15:24
浏览 9888
评论(2)
分类:Web前端
查看更多

2 楼 13146489 2012-08-10

田总又在搞研究工作了

1 楼 cdhk123 2012-02-01

博主的风格朴素明了，希望继续努力，

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论