對買家來說是很好的消費體驗，網上有很多這樣的插件都是基於JQuery實現的。
有壹個插件叫3deye.js，其實很有用。該插件支持桌面和移動終端。
結束iOS和Android，
所以先說壹下它的360度全景的原理。
1.首先，我們需要拍下實物的照片。間隔是每張照片旋轉15度，所以我們需要23張照片。
2.當照片準備好了，試著選擇JPG格式，並剪成合適的尺寸。
3.所有照片都是用JavaScript預加載的，加載精度可以用進度條顯示。
4.創建/獲取畫布對象，並添加鼠標來監視事件。當鼠標左右移動時，將無法正常繪制。
同樣的框架。總的原理是這樣的，簡單！
實施代碼:
& lt！DOCTYPE html & gt
& lthtml & gt
& lthead & gt
& ltmeta charset=utf-8 " >
& lttitle & gt360度全景& lt/title & gt；
& lt腳本& gt
var ctx = null//全局變量2d上下文
var frame = 1；// 23
var寬度= 0；
var height = 0；
var started = false
var images = new Array()；
var started x =-1；
window.onload = function() {
var canvas = document . getelementbyid(" full view _ canvas ")；
canvas.width = 440//window . inner width；
畫布. height = 691；//window . inner height；
width = canvas.width
height = canvas.height
var bar = document . getelementbyid(' load progress bar ')；
for(var I = 1；我& lt24;i++)
{
bar . value = I；
如果(我& lt10)
{
images[I]= new Image()；
圖像[i]。src = "0" + i +"。jpg "；
}
其他
{
images[I]= new Image()；
圖像[i]。src = i +"。jpg "；
}
}
CTX = canvas . get context(" 2d ")；
//鼠標事件
canvas . addevent listener(" mousedown "，doMouseDown，false)；
canvas . addevent listener(' mousemove '，doMouseMove，false)；
canvas . addevent listener(' mouseup '，doMouseUp，false)；
//loaded()；
// frame = 1
frame = 1；
圖像[框架]。onload = function() {
redraw()；
bar . style . display = ' none '；
}
}
函數doMouseDown(事件){
var x = event.pageX
var y = event.pageY
var canvas = event.target
var loc = getPointOnCanvas(canvas，x，y)；
console.log("鼠標按下點(x:" + loc.x +"，y:"+loc . y+"))；
startedX = loc.x
開始=真；
}
函數doMouseMove(事件){
var x = event.pageX
var y = event.pageY
var canvas = event.target
var loc = getPointOnCanvas(canvas，x，y)；
如果(開始){
var count = math . floor(math . ABS((startedX-loc . x)/30))；
var frame index = math . floor((startedX-loc . x)/30)；
while(count & gt；0)
{
console . log(" frame index = "+frame index ")；
count-；
if(frame index & gt；0)
{
frame index-；
frame++；
} else if(frame index & lt；0)
{
frame index++；
框架-；
}
else if(frameIndex == 0)
{
打破；
}
if(frame & gt；= 24)
{
frame = 1；
}
if(frame & lt；= 0)
{
框架= 23；
}
redraw()；
}
}
}
函數doMouseUp(事件){
console.log("鼠標現在擡起")；
如果(開始){
doMouseMove(事件)；
started x =-1；
開始=假；
}
}
函數getPointOnCanvas(canvas，x，y) {
var bbox = canvas . getboundingclientrect()；
返回{ x:x-bbox . left *(canvas . width/bbox . width)，
y:y-bbox . top *(canvas . height/bbox . height)
};
}
函數loaded() {
setTimeout(更新，1000/8)；
}
函數重繪()
{
//var image obj = document . createelement(" img ")；
//var Image obj = new Image()；
var image obj = images[frame]；
ctx.clearRect(0，0，寬度，高度)
ctx.drawImage(imageObj，0，0，width，height)；
}
函數更新(){
redraw()；
frame++；
if(frame & gt；= 23)幀= 1；
setTimeout(更新，1000/8)；
}
& lt/script & gt；
& lt/head & gt；
& ltbody & gt
& ltprogress id = " loadProgressBar " value = " 0 " max = " 23 " & gt；& lt/progress & gt；
& ltcanvas id = " fullview _ canvas " & gt& lt/canvas & gt；
& ltbutton onclick = " loaded()" & gt；自動播放& lt/button & gt；
& lt/body & gt；
& lt/html & gt；