現(xiàn)在，在這個(gè)網(wǎng)絡(luò)發(fā)達(dá)的時(shí)代，一些電子商務(wù)公司，需要將自己線上的產(chǎn)品給買家或用戶看，為了能讓用戶了解的更全面，那么把一個(gè)物件的產(chǎn)品要展示到方方面面，就要運(yùn)用到360度旋轉(zhuǎn)圖片特效，因?yàn)樯洗斡信笥呀形規(guī)退@樣一個(gè)效果，然后結(jié)合網(wǎng)上的資源，就小試牛刀了，覺(jué)得還挺好玩的，效果還是可以看的吧。

　　首先呢，需要在HTML文檔中引入3deye.min.js文件和jq.js，這些可以在網(wǎng)上下載到免費(fèi)的，另外，要展示到方方面面的，就要做這件物品的各個(gè)角度的圖片，我這里是36張圖片，每10度一張圖片，好了，我就貼出代碼了，html代碼如下：

<div id="demo" class="box"></div> ?

css代碼如下，其中呢div的大小應(yīng)該和圖片大小相同：

<style>
　　.box{width: 720px; height: 486px; margin:0 auto; cursor: pointer;}
</style>

最重要的js代碼如下：

<script>
　　$(document).ready(function(){

　　　　$("#demo").vc3dEye({
　　　　imagePath:"img/", //圖片路徑
　　　　totalImages:36, ? //圖片張數(shù)
　　　　imageExtension:"jpg" ?//圖片擴(kuò)展名
});

　　});
</script>

　　這樣實(shí)現(xiàn)的效果是每用鼠標(biāo)拉一次就看到這個(gè)物品的10度角圖片，這樣呢，如果看得慢的人，可以慢慢看，另外，如果想要它自己轉(zhuǎn)動(dòng)著看，這就需要加一個(gè)定時(shí)器了（html和css代碼和上相同），這里沒(méi)有引入3deye.min.js文件和jq.js,用的是js的定時(shí)器，代碼如下：

<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>

這樣，自動(dòng)360度效果就實(shí)現(xiàn)了，好了，我也是初學(xué)者，就寫到這里，有什么問(wèn)題希望大家能夠指正，謝謝！

?

轉(zhuǎn)載于:https://www.cnblogs.com/yuershuo/p/5702917.html

總結(jié)

以上是生活随笔為你收集整理的360度旋转图片小特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。