html的3d旋转木马插件,jRCarousel | jQuery响应式3D旋转木马插件

jR3DCarousel是一款效果非常炫酷的3D旋转木马jQuery插件。该旋转木马插件可以通过参数设置来修改旋转木马的类型，可以设置显示模式和easing动画缓动模式等。它的特点还有：

多种动画效果

响应式设计

可制作全屏幻灯片效果

轻量级插件

多种幻灯片布局

配置简单，易于使用

安装

可以通过npm和bower来安装jR3DCarousel旋转木马插件。

bower install jR3DCcarousel

bower install jr3dcarousel

使用方法

你也可以下载插件压缩包，在页面中引入jQuery和jR3DCarousel.min.js文件。

HTML结构

jR3DCarousel旋转木马的基本HTML结构如下：

jR3DCarousel旋转木马也可以完全依赖JavaScript代码来生成，你只需要提供一个包裹容器即可。

初始化插件

首先你需要提供一组图片作为旋转木马显示的内容。

var slides = [{src: 'img/1.jpg'},

{src: 'img/2.jpg'},

{src: 'img/3.jpg'},

{src: 'img/4.jpg'},

{src: 'img/5.jpg'},

{src: 'img/6.jpg'},

{src: 'img/7.jpg'}];

然后可以通过下面的方法来初始化jR3DCarousel旋转木马插件。

$('.jR3DCarouselGallery').jR3DCarousel({

slides: slides

});

配置参数

jR3DCarousel旋转木马有以下一些可用的配置参数。

width：最大宽度。

height：最大高度。

slides：图片数组或获取图片的class。

slideLayout：布局模式。"contain"表示按比例布局。"fill"表示拉伸来填充。"cover"表示溢出但是保持比例。

animation：动画方式。可选值有：slide | scroll | fade | zoomInSlide | zoomInScroll。

animationDuration：动画速度，单位毫秒。

animationInterval：两个slide之间的动画延迟时间，单位毫秒

autoplay：是否自动播放。

onSlideShow：当Slide触发的时候的回调函数。

navigation：导航样式。可选值有：circles | squares。

公共API

showSlide(slideIndex)：显示slideIndex指定的图片，slideIndex从0开始。

showPreviousSlide()：显示前一张图片。

showNextSlide()：显示下一张图片。

getSlideByIndex(slideIndex)：返回slideIndex指定的旋转木马jQuery对象。

getCurrentSlide()：返回当前的旋转木马jQuery对象。

var myjR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({

slides: slides

});

myjR3DCarousel.showSlide(0);

myjR3DCarousel.showPreviousSlide();

myjR3DCarousel.howNextSlide();

var slide = myjR3DCarousel.getSlideByIndex(1);

var currentSlide = myjR3DCarousel.getCurrentSlide();