360度旋转图片小特效

标签：

　　现在，在这个网络发达的时代，一些电子商务公司，需要将自己线上的产品给买家或用户看，为了能让用户了解的更全面，那么把一个物件的产品要展示到方方面面，就要运用到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度效果就实现了，好了，我也是初学者，就写到这里，有什么问题希望大家能够指正，谢谢！

360度旋转图片小特效

标签：

原文地址：http://www.cnblogs.com/yuershuo/p/5702917.html