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

转载于:https://www.cnblogs.com/yuershuo/p/5702917.html

360度旋转图片小特效相关推荐

  1. html5图片自动翻转,纯js实现360度旋转预览图片特效

    这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...

  2. js产品360度旋转预览图片插件

    下载地址 纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:

  3. 【精心挑选】10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

  4. 精心挑选10款基于 jQuery 的图片360度旋转插件

    之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考.图片旋转展示是一种 ...

  5. 图片可以360度旋转类似广告代码

    图片可以360度旋转类似广告代码 <div style='height:60px; line-height:50px; text-align:center; color: #b2b2b2;'&g ...

  6. spritespin.js插件实现图片360度旋转

    1. 官网:http://spritespin.ginie.eu/: SpriteSpin是一个jQuery插件,可将图像帧转换为动画.它需要一个图像阵列或一个精确的精灵片,并像翻转书一样逐帧播放它们 ...

  7. css3 向上淡入 小图标翻转 360度旋转

    代码 <!DOCTYPE HTML> <html> <style type="text/css">div {border: 1px solid ...

  8. jQuery 图像 360 度旋转插件

    13 款最热门的 jQuery 图像 360 度旋转插件推荐 时间:02月07日 在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° ...

  9. 360环物如何发布html,制作网页上的360度旋转全景图PixMaker使用详细教程

    PixMaker是一个简单方便的360度全景图片制作软件,它可以将描写一个环型场景的多个连续图片无缝地接合在一起,形成一个360度"场景"图片.可以在网页上播放,使你的页面更加生动 ...

最新文章

  1. 20家股东联名施压，要求贝佐斯停止向警方出售面部识别软件
  2. 华为硬件工程师社招机考题库_干货：2016年华为中兴硬件工程师笔试题目与经验...
  3. php过气了吗,留几手 留几手过气原因
  4. rsyslog syslog详解
  5. 如何用python做一个会聊天的女朋友_520来啦~教你用Python给自己造了一个女朋友！...
  6. sort对结构体排序
  7. Js 怎么遍历json对象所有key及根据动态key获取值（根据key值获取相应的value值）...
  8. html元素两种分类。替换元素和不可替换元素；块级元素和行内元素
  9. 那些配置修改之后需要重新启动
  10. Less 官方文档学习笔记
  11. 单节1A锂电池充电芯片
  12. Javascript对象基础讲解
  13. stm32呼吸灯c语言程序,STM32之呼吸灯
  14. 【完结】JQ-从0到1-总结
  15. excel表格拆分多个表如何快速完成？
  16. 计算机左右手控制的按键,采用改进按键布局方法的计算机键盘技术
  17. 电子计算机二级的模拟试题,计算机二级模拟试题
  18. 绕线画 钉子画 勾线画 自动设计软件源码
  19. 什么是网络监控？OpManager 网络监控解决方案
  20. 一段php代码,请问一段PHP代码是什么意思？

热门文章

  1. python九九乘法表求和，平均数，最大值，最小值、金字塔、等边三角形
  2. liferay 点击build service 出现Cloud not reserve enough space for object heap
  3. Netcraft ：2019年4月全球Web服务器排名 nginx首度登顶
  4. r语言 面板数据回归_R语言——伍德里奇计量经济导论案例实践 第十三章 横截面与面板数据（一）...
  5. python 拓扑排序 dfs bfs_bfs与dfs的优缺点？
  6. JVM插桩之二：Java agent基础原理
  7. GO恶意样本实例分析
  8. 2020.11.me
  9. hadoop日志文件
  10. javascript中0级DOM和2级DOM事件模型浅析