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