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;
display: relative;
}
#carousel img {
display: 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的旋转速度，单位毫秒。
autoPlay
integer
4000
如果数值大于0，将使用该数值作为自动播放的速度。
pauseonHover
boolean
true
是否在鼠标hover是停止自动播放。
stopOnHover
boolean
false
如果设置了autoplay参数可用，该参数设置为true时，当鼠标hover图片时停止自动播放。
trackerIndividual
boolean
true
是否显示跟踪信息。
trackerSummation
boolean
true
a summation of the features can also be used to display an "x Of y" style of tracking this can be combined with the above option as well
preload
boolean
true
是否在显示Carousel之前预加载图片。
displayCutoff
integer
If greater than '0',will only use this amount of features within the carousel. Any after this number will be ignored.
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全部内容。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。