threesixty.js

threesixty.js 介绍

threesixty -slider 是一款可以制作360度产品 图片 预览的jQuery 插件 。该360度 图片 预览 插件 可以逐帧播放，也可以进行 自动 播放，还可以制作出响应式和基于html5的全屏 图片 效果 。它的特点还有：

动画过渡无缝平滑。

大量的定制参数可以选择。

可使用API进行交互。

可以通过鼠标进行交互。

自定义 行为调整。

支持 移动触摸设备。

易于集成。

兼容IE6+的所有现代浏览器。

安装

可以通过bower来安装该360度产品 图片 预览 插件 。

bower install threesixty-slider

使用 方法

下载压缩包，在 页面 中引入jquery，threesixty.min.js和threesixty.css 文件 。

<link href="css/threesixty.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/threesixty.min.js"></script>

html结构 360度产品 图片 预览特效的基本html结构如下：<div><div><span>0%</span></div><ol></ol></div> 初始化 插件 在 页面 DOM元素加载完毕之后，可以通过下面的 方法 来初始化该360度产品 图片 预览 插件 。window.onload = init;var product;function init(){product1 = $('.product1').ThreeSixty({totalFrames: 72,// Total no. of image you have for 360 sliderendFrame: 72,// end frame for the auto spin animationcurrentFrame: 1,// This the start frame for auto spinimgList: '.threesixty_images',// selector for image listprogress: '.spinner',// selector to show the loading progressimagePath:'assets/product1/',// path of the image assetsfilePrefix: 'ipod-',// file prefix if anyext: '.jpg',// extention for the assetsheight: 265,width: 400,navigation: true, dis ableSpin: true // Default false});}

配置参数

threesixty -slider 插件 的可用配置参数有：参数 默 认值类型描述totalFrames180Number设置360度旋转的总帧数currentFrame1Number设置 自动 播放开始的帧endFrame180Number设置 自动 播放结束的帧framerate60Number设置播放的帧率filePrefix''String 图片 的前缀，例如你的 图片 为nike_boot_1.png，那么前缀为nike_boot_extpngString 图片 文件 的扩展名height300Number容器的高度width300Number容器的宽度style{}Object样式对象，类似于jQuery.css({})navigationtrueBoolean是否开启导航控制a utop layDirection1Number控制播放的方向，可以设置为1或-1dragtrueBoolean设置为false则禁用鼠标和移动触摸事件 dis ableSpinfalseBoolean是否在初始化时禁用loading指示器zeroPaddingfalseBooleantrue will add 0 padding for file names 1 - 9responsivefalseBoolean是否开启响应式 图片 onReadyfunction() {}Function当所有 图片 加载完毕后触发

方法

方法 名称 描述.play() 自动 播放.stop()停止 自动 播放.next()播放下一帧.prev IoU s()播放前一帧.gotoAn dpl ay()播放指定的帧 链接 : http://www.fly63.com/nav/2313

网站地址 : http://ww1.360slider.com/

GitHub: https://github.com/creativeaura/threesixty-slider

网站描述: 360度产品 图片 预览jQuery 插件

threesixty.js官方网站

官方网站： http://ww1.360slider.com/

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于threesixty.js的详细内容...