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 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
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
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
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。