幻灯片/轮播

3D图片旋转木马特效jQuery插件

创客主机


这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。

HTML结构:

该旋转木马插件的HTML结构使用一个空的

即可。

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

在调用插件之前要引入所有的外部依赖文件。然后可以使用下面的方法调用该旋转木马插件:

  1. $(function(){
  2.   $(".box").ig3js({
  3.       manifest: [
  4.           {src:"image1.jpg", id:"image1"},
  5.           {src:"image2.jpg", id:"image2"},
  6.           {src:"image3.jpg", id:"image3"},
  7.           {src:"image4.jpg", id:"image4"},
  8.           {src:"image5.jpg", id:"image5"},
  9.           {src:"image6.jpg", id:"image6"},
  10.           {src:"image7.jpg", id:"image7"}
  11.         ],
  12.         imagePath: 'images/'
  13.     });
  14. });

配置参数:

名称类型默认值描述
manifestArrayNull图片路径列表
imagePathStringNull指定图片所在路径
dxNumber300图片的水平间距
dzNumber300图片的垂直间距
deltaRotationNumber45没有被激活的图片的旋转角度
planeSizeNumber500激活面板的宽度
alphaBackgroundBooleantrue设置背景是否透明
antialiasBooleantrue抗锯齿设置
progress
lightHex"#ff0000"设置进度条亮光面的颜色
ambientLightHex"#ffffff"设置进度条环境光的颜色
positionArray[0,100,0]设置进度条的位置
statsBooleanfalse设置是隐藏还是显示

事件:

名称触发时机
onImageLoadProgress调用图片的线程
onImageLoadComplete图片加载完成
onImageLoad图片开始加载
onNavigateComplete导航结束。参数:激活的面板,类型为对象

方法:

名称描述
.next()旋转木马旋转到下一图片
.prev()旋转木马旋转到上一图片
<object>.goTo(<index>);旋转木马旋转到指定的图片。参数:index,类型:Number。图片列表中元素的序号,从0开始计数
.perspective.defaul();设置旋转木马的3D透视为默认透视。
.perspective.topRight()设置旋转木马的3D透视点在右边。
.perspective.topLeft()设置旋转木马的3D透视点在左边。
(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!