最近在研究商品的虚拟展示技术，我们项目中需要一个3D展示的功能，3D展示也就是把一个商品旋转360°来展示它的各个层面，网上Baidu+Google后，还真发现这种实现方式有很多，比如有Quicktime的，Flash的和javascript的。

分析后，发现它们各有优缺点，用Quicktime来实现，首先需要将全景图片制作成.mov格式的文件，而且客户浏览器必须安装Quicktime插件才能看效果；用Flash来实现，需要学习Flash的相关技术和ActionScript，这些我都不熟，所以放弃了，呵呵。对于javascript实现方式，我还是很赞同的，因为它不需安装任何插件，而且开发起来更容易上手，尤其现在有了jquery，它不仅降低了开发的工作量而且可以轻易实现更多的展示效果，所以最终选择了jquery来实现。

经过几天时间，1.0版本终于出来了，现在贴出来与大家一起分享，如果有朋友正在做这方面的开发，希望能给你有所帮助，就算抛砖引玉了，希望多多交流阿，呵呵，不多说了，看正文吧 。

参考：http://www.mathieusavard.info/

jquery Panorama Plugins

• 当前版本: 1.0 (07/29/2010)
• Demo
• Download

特性

• 支持自动旋转及向左、右方向的旋转
• 支持鼠标拖拽旋转和鼠标滑过旋转
• 支持按钮点击缩放和鼠标滚轮缩放
• 支持重置操作

兼容性

• Firefox 3.6
• IE6-IE8
• 其它待测

用法

1、首先需要引入 jQuery Lib包、jquery.mousewheel.js, jquery.panorama-1.0.js. 我们在这用到jquery的mousewheel插件来实现鼠标滚轮事件。

1. %MINIFYHTMLd01b1f0858d25b8c2b7858cb1d608a6330%%MINIFYHTMLd01b1f0858d25b8c2b7858cb1d608a6331%%MINIFYHTMLd01b1f0858d25b8c2b7858cb1d608a6332% 

2、加入css样式

1. .panorama_box{border:1px solid #fff; margin:auto;} 
2. .image_box{border:1px solid #369; margin:auto; overflow:hidden;position:relative;} 
3. .image_box img{position:relative;} 
4. .toolbar{border:1px solid #CCCCCC;height:45px;margin:2px 0;} 
5. .toolbar span{height:40px;width:38px;margin:2px;cursor:pointer;display:block;float:right;} 
6. .zoomin{background:url("images/toolbar.jpg") no-repeat scroll 0 0;} 
7. .zoomout{background:url("images/toolbar.jpg") no-repeat scroll -38px 0;} 
8. .turnleft{background:url("images/toolbar.jpg") no-repeat scroll -112px 0;} 
9. .turnright{background:url("images/toolbar.jpg") no-repeat scroll -76px 0;} 
10. .start{background:url("images/toolbar.jpg") no-repeat scroll -150px 0;} 
11. .pause{background:url("images/toolbar.jpg") no-repeat scroll -188px 0;} 
12. .reset{background:url("images/toolbar.jpg") no-repeat scroll -226px 0;} 

3、需要将你拍好的多张物品图片命名规则后放置指定目录中，如：images/pic2/，并在页面中添加展示物品的第一张图

1. <img id="click" src="http://www.woiweb.net/wp-content/themes/Expi/images/grey.gif" alt="" width="480" height="480" original="images/pic2/1.jpg"> 

4、Javascript调用

1. $(function() { 
2.     var arr = [] 
3.     for (var x=1; x<= 25; x++) { 
4.         arr.push("images/pic2/" + x + ".jpg"); 
5.     } 
6.     $("#click").threesixty({ 
7.         images:arr, 
8.         method:'click', 
9.         'cycle':1 
10.     }); 
11. }); 

看看效果吧，:)

参数说明