600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > html的3d旋转木马插件 jRCarousel | jQuery响应式3D旋转木马插件

html的3d旋转木马插件 jRCarousel | jQuery响应式3D旋转木马插件

时间:2021-08-02 13:17:34

相关推荐

html的3d旋转木马插件 jRCarousel | jQuery响应式3D旋转木马插件

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。