現在，在這個網絡發達的時代，一些電子商務公司，需要將自己線上的產品給買家或用戶看，為了能讓用戶了解的更全面，那么把一個物件的產品要展示到方方面面，就要運用到360度旋轉圖片特效，因為上次有朋友叫我幫她弄這樣一個效果，然后結合網上的資源，就小試牛刀了，覺得還挺好玩的，效果還是可以看的吧。
首先呢，需要在HTML文檔中引入3deye.min.js文件和jq.js，這些可以在網上下載到免費的，另外，要展示到方方面面的，就要做這件物品的各個角度的圖片，我這里是36張圖片，每10度一張圖片，好了，我就貼出代碼了，html代碼如下：
<div id="demo" class="box"></div>
css代碼如下，其中呢div的大小應該和圖片大小相同：
<style>
.box{width: 720px; height: 486px; margin:0 auto; cursor: pointer;}
</style>
最重要的js代碼如下：
<script>
$(document).ready(function(){
$("#demo").vc3dEye({
imagePath:"img/", //圖片路徑
totalImages:36, //圖片張數
imageExtension:"jpg" //圖片擴展名
});
});
</script>
這樣實現的效果是每用鼠標拉一次就看到這個物品的10度角圖片，這樣呢，如果看得慢的人，可以慢慢看，另外，如果想要它自己轉動着看，這就需要加一個定時器了（html和css代碼和上相同），這里沒有引入3deye.min.js文件和jq.js,用的是js的定時器，代碼如下：
<script type="text/javascript">
var imgUrl = document.getElementById("imgulr");
var index = 2;
var roateImg = setInterval(function(){
imgUrl.src="img/" + index + ".jpg";
index ++;
if(index >= 37) {
index = 1;
}
}, 200);
</script>
這樣，自動360度效果就實現了，好了，我也是初學者，就寫到這里，有什么問題希望大家能夠指正，謝謝！