支持触摸屏的响应式jQuery旋转木马插件--Owl Carousel

一：需求

项目需求，开发活动页面，做一个可通过滑动和按钮控制的旋转木马式按钮列表供用户使用。

于是用到了Owl Carousel这个插件，比较好用的一个插件。

二：插件的使用

1 ：插件的使用示例（非常全的资源）

http://download.csdn.net/download/j_bang/10040279

2：使用：

（1）引入js（owl.carousel.min.js）和css（owl.carousel.css）文件（需要依赖jquery）

（2）定义自己的div

<div id="owl-demo" class="owl-carousel"><a class="item"><img src="img/owl1.jpg" alt=""></a><a class="item"><img src="img/owl2.jpg" alt=""></a><a class="item"><img src="img/owl3.jpg" alt=""></a><a class="item"><img src="img/owl4.jpg" alt=""></a><a class="item"><img src="img/owl5.jpg" alt=""></a><a class="item"><img src="img/owl6.jpg" alt=""></a><a class="item"><img src="img/owl7.jpg" alt=""></a><a class="item"><img src="img/owl8.jpg" alt=""></a><a class="item"><img src="img/owl1.jpg" alt=""></a><a class="item"><img src="img/owl2.jpg" alt=""></a><a class="item"><img src="img/owl3.jpg" alt=""></a><a class="item"><img src="img/owl4.jpg" alt=""></a><a class="item"><img src="img/owl5.jpg" alt=""></a><a class="item"><img src="img/owl6.jpg" alt=""></a><a class="item"><img src="img/owl7.jpg" alt=""></a><a class="item"><img src="img/owl8.jpg" alt=""></a></div>

（3）js 初始化

$(function(){    $('#owl-demo').owlCarousel();});

这样就完成了，是不是很简单？

三：插件的其他知识

（1）参数：

参数名称参数类型默认值描述itemsNumber3
在屏幕中可见的旋转木马项marginNumber0旋转木马项的margin-right值，单位像素loopBooleanfalse是否无限循环，会复制第一项和最后一项来制作无限循环的错觉centerBooleanfalse旋转木马项居中。在奇数和偶数项中都可以很好的工作mouseDragBooleantrue是否可以使用鼠标拖拽touchDragBooleantrue是否可以触摸拖拽pullDragBooleantrueStage pull to edge.freeDragBooleanfalseItem pull to edgestagePaddingNumber0Stage上的Padding left和Padding right(可以看到相邻的项)mergeBooleanfalse合并旋转木马项。Looking for data-merge='{number}' inside item.mergeFitBooleantrue如果屏幕比旋转木马项小，使旋转木马项适合屏幕大小autoWidthBooleanfalse设置非网格内容。尝试在div上使用width样式startPositionNumber/String0开始点或URL Hash字符串，如：'#id'URLhashListenerBooleanfalse监听url hash 的变化。必须在旋转木马项上设置data-hash属性navBooleanfalse显示ext/prev按钮navRewindBooleantrue跳转到前一项或后一项navTextArray['next','prev']HTML箭头导航slideByNumber/String1
Navigation slide by x. 'page' string can be set to slide by page.dotsBooleantrue显示圆点导航按钮dotsEachNumber/BooleanfalseDefault: false 每多少个项显示一个圆点导航按钮dotDataBooleanfalse使用data-dot的内容lazyLoadBooleanfalse是否懒加载图片。data-src和data-src-retina为高分辨率。如果元素不是<img>会设置为元素的内联背景图像。lazyContentBooleanfalselazyContent选项只在测试版中有，发行版中已经被删除。autoplayBooleanfalse旋转木马是否自动播放autoplayTimeoutNumber5000旋转木马自动播放的时间间隔autoplayHoverPauseBooleanfalse是否在鼠标滑过时停止自动播放smartSpeedNumber250速度计算fluidSpeedBooleanNumber速度计算autoplaySpeedNumber/Booleanfalse是新密码自动播放的速度navSpeedNumber/Booleanfalse旋转木马导航的速度dotsSpeedBooleanNumber/Boolean分页的速度dragEndSpeedNumber/BooleanfalseDrag end speedcallbacksBooleantrue是否允许回调函数responsiveObjectempty object包含responsive选项的对象。设置为flase取消responsive能力。responsiveRefreshRateNumber200
Responsive的刷新频率responsiveBaseElementDOM elementwindow可以设置在任何DOM元素上。如果你关心不支持响应式的浏览器（如IE8），可以在包裹容器中使用该属性。responsiveClassBooleanfalse可选的辅助class。添加owl-reponsive-和breakpoint class到主元素上。可以在给定breakpoint的元素上设置内容样式。videoBooleanfalse是否允许添加YouTube/Vimeo视频。videoHeightNumber/Booleanfalse设置视频的高度。videoWidthNumber/Booleanfalse设置视频的宽度。animateOutString/BoleanfalseCSS3 animation out.animateInString/BoleanfalseCSS3 animation in.fallbackEasingStringswingEasing for CSS2 $.animate.infoFunctionfalse获取基本信息的回调函数(当前的 item/pages/widths) 。Info函数的第二个参数是Owl DOM元素的对象引用。

（2）js方法的一些使用

//Initialize Plugin$(".owl-carousel").owlCarousel()//get carousel instance data and store it in variable owlvar owl = $(".owl-carousel").data('owlCarousel');//Public methodsowl.next()   // Go to next slideowl.prev()   // Go to previous slideowl.goTo(x)  // Go to x slideowl.update() // Update Slideowl.buildControlls()    // Build Controllsowl.destroyControlls()  // Remove Controllsowl.play() // Autoplayowl.stop() // Autoplay Stop

（4）控制每次显示item的个数：

itemsCustom : [  [0, 3],  [450, 3],  [600, 3],  [700, 3],  [1000, 3],  [1200, 3],]

插件是响应式的，第一个参数标识页面的尺寸，第二个标识显示item的个数、