幻灯片/轮播

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

面包多

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. });

配置参数:

名称 类型 默认值 描述
manifest Array Null 图片路径列表
imagePath String Null 指定图片所在路径
dx Number 300 图片的水平间距
dz Number 300 图片的垂直间距
deltaRotation Number 45 没有被激活的图片的旋转角度
planeSize Number 500 激活面板的宽度
alphaBackground Boolean true 设置背景是否透明
antialias Boolean true 抗锯齿设置
progress
light Hex "#ff0000" 设置进度条亮光面的颜色
ambientLight Hex "#ffffff" 设置进度条环境光的颜色
position Array [0,100,0] 设置进度条的位置
stats Boolean false 设置是隐藏还是显示

事件:

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

方法:

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

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!