幻灯片/轮播

jRCarousel - 响应式3D旋转木马jQuery插件

创客主机


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

多种动画效果

响应式设计

可制作全屏幻灯片效果

轻量级插件

多种幻灯片布局

配置简单,易于使用

使用方法:

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

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

HTML结构:

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

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

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

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

初始化插件:

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

  1. var slides = [{src: 'img/1.jpg'}, 
  2.               {src: 'img/2.jpg'}, 
  3.               {src: 'img/3.jpg'}, 
  4.               {src: 'img/4.jpg'},
  5.               {src: 'img/5.jpg'},
  6.               {src: 'img/6.jpg'},
  7.               {src: 'img/7.jpg'}];

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

  1. $('.jR3DCarouselGallery').jR3DCarousel({
  2.   slides: slides
  3. });

配置参数:

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对象

  1. var myjR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel({
  2.   slides: slides
  3. });
  4.  
  5. myjR3DCarousel.showSlide(0);
  6. myjR3DCarousel.showPreviousSlide();
  7. myjR3DCarousel.howNextSlide();
  8. var slide = myjR3DCarousel.getSlideByIndex(1);
  9. var currentSlide = myjR3DCarousel.getCurrentSlide();

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

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!