H5页面（三）效果之实现图片360度旋转---------spritespin.js插件
前端开发一起交流QQ群：740034288
1. 官网：http://spritespin.ginie.eu/；
SpriteSpin是一个jQuery插件，可将图像帧转换为动画。它需要一个图像阵列或一个精确的精灵片，并像翻转书一
样逐帧播放它们。此插件的目的是提供任何类型产品的360度视图。该插件的构建具有可扩展性，并允许Web开发
人员定制动画的行为和表示.
2. 下载引用：
方法1 ：npm install spritespin； import SpriteSpin from "spritespin" ;
方法2 ：
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='https://unpkg.com/spritespin@4.0.3/release/spritespin.js'></script>
方法3 ： <script src="./spritespin.js"></script>
3. 具体步骤：
3.1 为SpriteSpin创建一个容器：<div id='mySpriteSpin'></div>；
3.2 初始化插件：
<script >
$("#mySpriteSpin").spritespin({
animate:false/true, //是否自动播放360度图片旋转
frame:0, //初始时显示第几张图，默认为0开始
frames:8, //总共有几张图
frameTime:30, //每次图片旋转更新的时间(毫秒)
loop:true, //是否循环播放
reverse:true, //正向360度还是反向360度播放
stopFrame：5, //当loop:false表示停在第5张图上
source: [ //保存所有图片路径的数组
"path/to/frame_001.jpg",
"path/to/frame_002.jpg",
"path/to/frame_003.jpg",
"path/to/frame_004.jpg"
],
onComplete:function(){ //回调，加载完spritespin并且第一次绘制操作完成时发生
}，
onDraw：function(){ //当所有更新完成并且可以绘制框架时发生
},
onFrame：function(){ //当帧号(即当前图片更换)更新时发生
}，
onFrameChanged：function(){ //在帧号更改时发生
},
OnInit:function(){ //在插件初始化后，但在加载源文件之前发生
},
onProgress:function(){ //在加载任何源文件并且进度已更改时发生
},
onLoad:function(){ //所有源文件都已加载且spritespin准备好更新和绘制时发生
},
width : 480,
height : 327
});
自定义spritespin函数：
SpriteSpin.extendApi({
myFunction: function(){
console.log('这是自定义的函数', this.data.frame);
} });
var pine=$("#mySpriteSpin").spritespin({
pine.currentFrame(); //表示当前图片的编号
}).spritespin("api")；
var api = $("#mySpriteSpin").spritespin("api");
api.myFunction();
</script>
注意：在滑动图片360度旋转时，不能有其他div图层样式遮挡住spriteSpin插件的容器，
如果存在遮挡的div图层样式，可以为遮挡的div图层添加属性pionter-enents:none，阻止其默认事件。