Waterwheel-Carousel 介绍
jjQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图 插件 。该jquery Carousel轮播图 插件 兼容ie8浏览器，提供丰富的参数和API 方法 由于控制Carousel，使用简单，非常实用。
jQuery-Waterwheel-Carousel特点
支持 水平或垂直Carousel轮播。
可以通过 键盘 来控制前后轮播。
图片 移动时提供回调 函数 钩子。
支持 不同尺寸的 图片 。
支持 图片 边部透明 效果 。
支持 无缝滚动。
兼容Chrome,FireFox,Safari 和 IE7+浏览器。
使用 方法
在 页面 中引入jquery和jquery.waterwheelCarousel.min.js 文件 。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.waterwheelCarousel.min.js"></script>
?html结构使用 一个 <div>来作为容器，里面放置一组 图片 。
<div id="carousel">
<img src="/image1.jpg" alt="Image 1" />
<img src="/image2.jpg" alt="Image 2" />
<img src="/image3.jpg" alt="Image 3" />
<img src="/image4.jpg" alt="Image 4" />
<img src="/image5.jpg" alt="Image 5" />
</div>
?css样式为carousel指定下面的css样式。
<style type="text/css">
#carousel {
width:800px;
height: 300px;
dis play: relative;
}
#carousel img {
dis play: hidden; /* hide images until carousel prepares them */
cursor: pointer; /* not needed if you wrap carousel items in links */
}
</style>
?初始化 插件在 页面 DOM元素加载完毕之后，通过下面的 方法 来初始化该Carousel轮播图 插件 。
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
// include options like this:
// (use quotes only for string values,and no trailing comma after last option)
// option: value,
// option: value
});
});
?配置参数
该jquery Carousel轮播图 插件 的可用配置参数有：
参数
类型
默 认值
描述
largeFeatureWidth
integer
可取3个种值。0表示原始 图片 宽度。0-1之 间的 数表示原始 图片 乘以该数值。大于1的数表示使用该数值作为 图片 的宽度。
largeFeatureHeight
integer
和largeFeatureWidth参数的意义相同。
smallFeatureWidth
integer
0.5
可取3种值。0表示原始 图片 的一半。0-1之间表示原始 图片 乘以该数值。大于1的数值表示使用该数值作为 图片 的宽度。
smallFeatureHeight
integer
0.5
和smallFeatureWidth参数的意义相同。
topPadding
integer
20
容器顶部到Carousel边部的内边距。
sidePadding
integer
50
容器左右边部到Carousel边部的内边距。
smallFeatureOffset
integer
50
容器顶部到Carousel边部的补白。
startingFeature
integer
1
标示那副 图片 在初始化时 显示 在中间。
carouselSpeed
integer
1000
Carousel的旋转速度，单位毫秒。
a utop lay
integer
4000
如果数值大于0，将使用该数值作为 自动 播放的速度。
pau SEO nHover
boolean
true
是否在鼠标hover是停止 自动 播放。
stopOnHover
boolean
false
如果设置了a utop lay参数可用，该参数设置为true时，当鼠标hover 图片 时停止 自动 播放。
trackerIndividual
boolean
true
是否 显示 跟踪信息。
trackerSummation
boolean
true
a summation of the features can also be used to dis play an "x Of y" style of tracking this can be combined with the above option as well
preload
boolean
true
是否在 显示 Carousel之前 预加载 图片 。
dis playCutoff
integer
If greater than '0',will only use this amount of features within the carousel. Any after this number will be ig nor ed.
animationEasing
string
'swing'
carousel动画的easing 效果 。
leftButtonTag
string
'#carousel-left'
prev按钮的jquery选择器。
rightButtonTag
string
'#carousel-right'
next按钮的jquery选择器。
captionBelow
boolean
false
是否在carousel下方 显示 描述 文字 。
movedToCenter
function
$.noop
当 图片 移动到中间时触发的回调 函数 。
leavingCenter
function
$.noop
当 图片 离开中间位置时触发的回调 函数 。
clickedCenter
function
$.noop
当中 间的 图片 是 一个 链接 ，单该 链接 被点击时触发的回调 函数 。
网站地址 : https://github.com/bkosborne/jQuery-Waterwheel-Carousel
GitHub: https://github.com/bkosborne/jQuery-Waterwheel-Carousel
网站描述: 一款jquery 3d Carousel轮播图 插件
Waterwheel-Carousel官方网站
官方网站： https://github.com/bkosborne/jQuery-Waterwheel-Carousel
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。
查看更多关于Waterwheel-Carousel的详细内容...