<script><br></pre><p>因為我們需要用到一個小插件，所以必須要在jquery的基礎上去使用它。</p><div class="pgc-img"><img src="http://p98.pstatp.com/large/pgc-image/1538132658525ecb86d501f" img_width="650" img_height="650" style="height:650px" alt="WEB產品圖片的的全方位展示" inline="0"><p class="pgc-img-caption"></p></div><p><strong>引入circlr.js </strong></p><p>下載circlr.js的地址：http://andrepolischuk.github.io/circlr/。</p><pre><script src="circlr.js"><script><br></pre><p><strong> circlr.js簡介</strong></p><p><strong> </strong>就是封裝了一些H5的動畫，然後通過觸發點擊事件，和鼠標滾輪事件，來控制圖片轉動。</p><div class="pgc-img"><img src="http://p3.pstatp.com/large/pgc-image/1538131548571165612df4f" img_width="90" img_height="146" alt="WEB產品圖片的的全方位展示" inline="0"><p class="pgc-img-caption"></p></div><p><strong> 編寫HTML文檔</strong></p><p>它是由不同方位的很多張圖片組成的，我有汽車的圖片為例子（如果你想要弄別的圖片需要從視頻中把圖片拿出了就行，視頻就是一張張圖片做成的）：</p><div class="pgc-img"><img src="http://p99.pstatp.com/large/pgc-image/1538130881150c900d42665" img_width="1181" img_height="488" alt="WEB產品圖片的的全方位展示" inline="0"><p class="pgc-img-caption"></p></div><p>這裡注意的是我們不能直接給img的src屬性引入路徑，需要給它一個自定義的屬性，等我們使用circlr.js的時候會自動的把data-src中的屬性寫到src的路徑當中。</p><pre><div id='circlr'> <br> <img src =" " data-src="/image/01.png "><br><div><br></pre><div class="pgc-img"><img src="http://p99.pstatp.com/large/pgc-image/1538131561304abe5c8e59e" img_width="428" img_height="502" alt="WEB產品圖片的的全方位展示" inline="0"><p class="pgc-img-caption"></p></div><p><strong>調用circlr方法</strong></p><p>兩個配置項，一個是你為那個元素設置，一個是你的配置項。</p><pre> // var crl = circlr(element, options); <br> //element 就是 id 為circlr元素<br> // options 配置(對象)<br> var circlr = circlr("circlr", {<br> scroll: true<br> })<br> <br></pre><p>這就是簡單的全方位的圖片展示的做法了，如果需要進一步瞭解的話私信我就好了，希望可以讓你知道一些小東西，有可能在不經意的時候可以幫到你。</p></div>
閱讀更多 前端小棧 的文章
