浙江 杭州

jQuery产品图片360度旋转预览插件

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-03-13

人气6128

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款非常实用的可以对产品图片进行360度全方位旋转展示的jQuery插件。该插件通过使用不同角度的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。该插件非常适合于商品的展示。它的特点有:

  • 支持水平或垂直方向旋转。
  • 支持移动触摸事件。
  • 支持滚动事件。
  • 图片预加载处理。
  • 可以反向和循环旋转图片。

使用方法

该产品图片旋转插件首先要引入jQuery和circlr.js文件。

<script src='js/jquery.js'></script>                
<script src='js/circlr.js'></script>                
              

然后在你想要放置图片展示的元素上调用该插件:

var crl = circlr(element, options);                
              
  • element:放置图片的容器元素的ID。
  • options:参数对象。

配置参数

下面是该图片360度旋转插件的可用参数:

  • mouse:是否通过鼠标进行图片旋转,默认值为true
  • scroll:是否通过scroll进行图片旋转,默认值为false
  • vertical:是否在垂直方向上移动鼠标时旋转图片,默认值为false
  • reverse:是否反转方向,默认值为false
  • cycle:是否循环旋转图片,默认值为true
  • start:开始动画帧,默认值为0。
  • speed:动画帧通过circlr.turn(i)切换的速度,默认值为50毫秒。
  • autoplay:是否自动进行图片360度旋转播放,默认值为false
  • playSpeed:动画序列的播放速度,默认值为100毫秒。
  • loader:预加载DOM元素的ID。
  • ready:图片加载完成后的回调函数。
  • change:动画帧改编之后的回调函数(以当前帧和总帧数为参数)。

方法

下面是该图片360度旋转插件的可用方法:

  • crl.el:返回对象的DOM元素节点。
  • crl.length:返回对象的总的动画帧数。
  • crl.turn(i):动画旋转到第i帧。
  • crl.go(i):动画跳转到第i帧。
  • crl.play():开始动画序列的播放。
  • crl.stop():停止动画播放。
  • crl.hide():隐藏对象的DOM元素节点。
  • crl.show():显示对象的DOM元素节点。
  • crl.set(options):在插件初始化之后改变对象的参数:
    • vertical
    • reverse
    • cycle
    • speed
    • playSpeed

浏览器兼容

  • Internet Explorer 7+
  • Chrome
  • Safari
  • Firefox
  • Opera

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:777.11KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1935.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery产品图片360度旋转预览插件

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)