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

阅读更多

 

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插件，

页面代码如下(关键部分已加入注释)：

 

 

 

 

 

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