基于jQuery Circlr插件实现产品图片360度旋转


Posted in Javascript onSeptember 20, 2015

基于jQuery Circlr插件实现产品图片360度旋转

Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示。

它的特点有:

支持水平或垂直方向旋转。

支持移动触摸事件。

支持滚动事件。

图片预加载处理。

可以反向和循环旋转图片。

jQ酷实例教程:jQuery产品图片360度旋转Circlr

引入核心文件

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

建立html,只需建立一个放置图片的DIV容器,当然还可以加入一个加载的DIV提高体验性。

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>

写入JS,初始化插件

var crl = circlr(element, options); //调用方法
//element:放置图片的容器元素的ID。
//options:参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

参数

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:动画帧改编之后的回调函数(以当前帧和总帧数为参数)。

方法

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

以上内容是本文给大家介绍的基于jQuery Circlr插件实现产品图片360度旋转,希望大家喜欢。

Javascript 相关文章推荐
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
Bootstrap每天必学之下拉菜单
Nov 25 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
layui table 参数设置方法
Aug 14 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
You might like
PHP 实例化类的一点摘记
2008/03/23 PHP
php学习 函数 课件
2008/06/15 PHP
重新认识php array_merge函数
2014/08/31 PHP
浅谈php和.net的区别
2014/09/28 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
JS冒泡事件的快速解决方法
2013/12/16 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
django模板结构优化的方法
2019/02/28 Python
python 字符串常用方法汇总详解
2019/09/16 Python
python交互模式基础知识点学习
2020/06/18 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
大学新生军训个人的自我评价
2013/10/03 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
班组长安全工作职责
2014/07/15 职场文书
运动会稿件100字
2014/09/24 职场文书
升学宴学生致辞
2015/09/29 职场文书