html/jq介绍公司产品图的最佳排列方式,threesixty.js-360度产品图片预览jQuery插件
threesixty-slider是一款可以制作360度产品图片预览的jQuery插件。该360度图片预览插件可以逐帧播放，也可以进行自动播放，还可以制作出响应式和基于HTML5的全屏图片效果。它的特点还有：
动画过渡无缝平滑。
大量的定制参数可以选择。
可使用API进行交互。
可以通过鼠标进行交互。
自定义行为调整。
支持移动触摸设备。
易于集成。
兼容IE6+的所有现代浏览器。
安装
可以通过bower来安装该360度产品图片预览插件。
bower install threesixty-slider
使用方法
下载压缩包，在页面中引入jquery，threesixty.min.js和threesixty.css文件。
HTML结构
360度产品图片预览特效的基本HTML结构如下：
0%
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该360度产品图片预览插件。
window.onload = init;
var product;
function init(){
product1 = $('.product1').ThreeSixty({
totalFrames: 72, // Total no. of image you have for 360 slider
endFrame: 72, // end frame for the auto spin animation
currentFrame: 1, // This the start frame for auto spin
imgList: '.threesixty_images', // selector for image list
progress: '.spinner', // selector to show the loading progress
imagePath:'assets/product1/', // path of the image assets
filePrefix: 'ipod-', // file prefix if any
ext: '.jpg', // extention for the assets
height: 265,
width: 400,
navigation: true,
disableSpin: true // Default false
});
}
配置参数
threesixty-slider插件的可用配置参数有：
参数
默认值
类型
描述
totalFrames
180
Number
设置360度旋转的总帧数
currentFrame
1
Number
设置自动播放开始的帧
endFrame
180
Number
设置自动播放结束的帧
framerate
60
Number
设置播放的帧率
filePrefix
''
String
图片的前缀，例如你的图片为nike_boot_1.png，那么前缀为nike_boot_
ext
png
String
图片文件的扩展名
height
300
Number
容器的高度
width
300
Number
容器的宽度
style
{}
Object
样式对象，类似于jQuery.css({})
navigation
true
Boolean
是否开启导航控制
autoplayDirection
1
Number
控制播放的方向，可以设置为1或-1
drag
true
Boolean
设置为false则禁用鼠标和移动触摸事件
disableSpin
false
Boolean
是否在初始化时禁用loading指示器
zeroPadding
false
Boolean
true will add 0 padding for file names 1 - 9
responsive
false
Boolean
是否开启响应式图片
onReady
function() {}
Function
当所有图片加载完毕后触发
方法
方法名称
描述
.play()
自动播放
.stop()
停止自动播放
.next()
播放下一帧
.previous()
播放前一帧
.gotoAndPlay()
播放指定的帧