添加小程序，兌換各種視頻教程/數據資源。

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，阻止其默認事件。

?

?

?

?

?

總結

以上是生活随笔為你收集整理的H5页面（三）效果之实现图片360度旋转---------spritespin.js插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。