jRCarousel | jQuery响应式3D旋转木马插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

多种动画效果
响应式设计
可制作全屏幻灯片效果
轻量级插件
多种幻灯片布局
配置简单，易于使用

安装

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

bower install jR3DCcarousel
bower install jr3dcarousel

使用方法

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

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src="https://cdn.rawgit.com/vinayakjadhav/jR3DCarousel/master/dist/jR3DCarousel.min.js"></script>

HTML结构

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

<div class="jR3DCarouselGallery">
  <div class="slide"><img src="img/1.jpg" /></div>
  <div class="slide"><img src="img/2.jpg" /></div>
  <div class="slide"><img src="img/3.jpg" /></div>
  <div class="slide"><img src="img/4.jpg" /></div>
  <div class="slide"><img src="img/5.jpg" /></div>
  <div class="slide"><img src="img/6.jpg" /></div>
  <div class="slide"><img src="img/7.jpg" /></div>
</div>

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

<div class="jRCarouselGallery"></div>

初始化插件

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

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();

jR3DCarousel旋转木马插件github地址：https://github.com/vinayakjadhav/jR3DCarousel