HTML5 CSS3 jQuery实现产品360度全景旋转展示
程序员文章站
2022-03-01 13:49:20
...
本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