jQuery滚动切换传送插件jCarousel使用简介
jQuery滚动切换传送插件jCarousel使用简介
?
1、技术目标
掌握jCarousel插件的基本操作
2、jCarousel简介
jCarousel是jQuery传送带效果插件，这类插件也比较多，选择jCarousel
因为它简单实用，支持循环slide，支持pager等等，本文通过一个最简单的
水平传送效果来介绍jCarousel插件，如图：
提示：jCarousel中文帮助文档已提供下载 (jCarousel Help.rar)
3、使用准备
3.1）创—emo文件夹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" 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;}?
?
?