这款效果非常的不错，比较适合做产品图片360度全面观看。
特性
支持自动旋转及向左、右方向的旋转
支持鼠标拖拽旋转和鼠标滑过旋转
支持按钮点击缩放和鼠标滚轮缩放
支持重置操作
兼容性
Firefox3.6
IE6-IE8
其它待测
用法
、首先需要引入jqueryLib包、jquery.mousewheel.js,jquery.panorama-1.0.js.我们在这用到jquery的mousewheel插件来实现鼠标滚轮事件。
[code]
<scriptsrc="js/jquery-1.3.2.min.js"type="text/javascript"></script>
<scriptsrc="js/jquery.mousewheel.js"type="text/javascript"></script>
<scriptsrc="js/jquery.panorama-1.0.js"type="text/javascript"></script>
[/code]
、加入CSS样式
[code]
.panorama_box{border:1pxsolid#fff;margin:auto;}
.image_box{border:1pxsolid#369;margin:auto;overflow:hidden;position:relative;}
.image_boximg{position:relative;}
.toolbar{border:1pxsolid#CCCCCC;height:45px;margin:2px0;}
.toolbarspan{height:40px;width:38px;margin:2px;cursor:pointer;display:block;float:right;}
.zoomin{background:url("images/toolbar.jpg")no-repeatscroll00;}
.zoomout{background:url("images/toolbar.jpg")no-repeatscroll-38px0;}
.turnleft{background:url("images/toolbar.jpg")no-repeatscroll-112px0;}
.turnright{background:url("images/toolbar.jpg")no-repeatscroll-76px0;}
.start{background:url("images/toolbar.jpg")no-repeatscroll-150px0;}
.pause{background:url("images/toolbar.jpg")no-repeatscroll-188px0;}
.reset{background:url("images/toolbar.jpg")no-repeatscroll-226px0;}
[/code]
、需要将你拍好的多张物品图片命名规则后放置指定目录中，如：images/pic2/，并在页面中添加展示物品的第一张图
[code]
<imgid="click"src="//www.woiweb.net/wp-content/themes/Expi/images/grey.gif"alt=""width="480"height="480"original="images/pic2/1.jpg">
[/code]
、Javascript调用
[code]
$(function(){
vararr=[]
for(varx=1;x<=25;x++){
arr.push("images/pic2/"+x+".jpg");
}
$("#click").threesixty({
images:arr,
method:'click',
'cycle':1
});
});
[/code]