基于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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 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作的文本留言本的例子(三)
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
php支付宝APP支付功能
2020/07/29 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
[00:10]神之谴戒
2019/03/06 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python实现单链表的方法示例
2019/09/03 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
本科生就业推荐信
2014/05/19 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
演讲开场白和结束语
2015/05/29 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书