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