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 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() | 播放指定的帧 |
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/2313
