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