HTML5 CSS3 jQuery实现产品360度全景旋转展示
2015-06-17 09:16:59  By: shinyuu

• shinyuu
• JQuery教程
• 0
• 9112
• 2

本Demo是一个使用jQuery实现产品360度旋转展示的案例、代码量比较少、使用起来非常方便、支持预加载、能够快速全面的的预览产品的图片、其主要原理是利用多张图片按顺序播放实现、Demo里面一共有64张图片、整体风格还是非常不错的

HTML代码

<div id="box-wrapper">
  <div class="box-control box-control-left">
	<a title="顺时针转动" href="javascript:void(0)"
	  class="prev" id="prev"></a>
  </div>
  <div id="mask"><em class="loading">
    <p>loading</p>
    </em></div>
  <div id="box" path_pattern=´img/###.png´></div>
  <div id="imgbox"></div>
  <div class="box-control box-control-right">
    <a title="逆时针转动" href="javascript:void(0)"
	  class="next" id="next"></a>
  </div>
</div>

所有的CSS代码和JS代码都已经封闭到.css和.js的文件里面、可以直接引入就可以正常使用了、非常方便

<script src="jquery.min.js"></script>
<script type="text/javascript" src="360show.js" ></script>

最后给贴上Demo的源代码、希望对大家有用、有兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1o69mLkQ 密码: 8749

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛