`
HotStrong
  • 浏览: 507481 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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

jCarouselcarousel滚动切换传送 
阅读更多

 

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

 

 

 

7
顶
1
踩
分享到：
| Spring AOP 完成日志记录
评论
2 楼 13146489 2012-08-10  
田总又在搞研究工作了
1 楼 cdhk123 2012-02-01  
博主的风格朴素明了，希望继续努力，
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics