全景照片：所谓“全景拍摄”就是将所有拍摄的多张图片拼成一张全景图片。它的基本拍摄原理是搜索两张图片的边缘部分，并将成像效果最为接近的区域加以重合，以完成图片的自动拼接。现在的智能手机也基本带这个功能。
这个小DEMO基于全景照片的左右边缘较为接近且适宜自动拼接与jser熟知的无缝滚动原理。下面这个图片就是本DEMO实现原理的简化图。
HTML结构:Loading...←‖→StandardRoomSeaviewRoom(PVSU1)RoyaleSuiteBellaSuite11RoyaleSuite(PVSU1)RoyaleSuiteBellaSuiteRoyaleSuite(PVSU1)X
CSS样式：*{margin:0;padding:0;}
li{list-style:none;}
body{font-size:11px;}
a{text-decoration:none;}
.pop_see_360pic:after{clear:both;display:block;content:".";height:0;visibility:hidden;font-size:0;line-height:0;}
.pop_see_360pic{position:relative;float:left;width:550px;padding:14px70px14px71px;border:1pxsolid#CECECE;background-color:#FFFFFF;zoom:1;}
.pop_see_360pic_fla{width:650px;padding:20px40px14px0;}
.pop_see_360pic.mbtn{position:absolute;top:12px;right:20px;}
.pop_see_360pic.pic_box{position:relative;float:left;width:320px;height:240px;overflow:hidden;margin-right:10px;}
.pop_see_360pic.pic_boximg{display:block;width:320px;height:240px;}
.pop_see_360pic.pic_list{float:left;width:220px;height:240px;overflow-x:hidden;overflow-y:auto;}
.pop_see_360pic.pic_listul{overflow:hidden;width:218px;border:1pxsolid#CECECE;border-bottom:0none;}
.pop_see_360pic.pic_listli{float:left;width:218px;height:35px;font-weight:bold;border-bottom:1pxsolid#CECECE;}
.pop_see_360pic.pic_listlia{display:block;width:100%;height:18px;overflow:hidden;padding:9px10px8px10px;zoom:1;}
.pop_see_360pic.pic_listlia:hover{text-decoration:none;background-color:#EFF0F1;}
.pop_see_360pic.pic_listlia.sel,
.pop_see_360pic.pic_listlia.sel:hover{text-decoration:none;background-color:#C1D3F1;}
.pop_see_360pic.prev_arrow,
.pop_see_360pic.pause_arrow,
.pop_see_360pic.next_arrow{position:absolute;left:124px;bottom:0;width:70px;height:27px;overflow:hidden;padding-top:17px;text-align:center;font-size:12px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFFFFFF',endColorstr='#7FFFFFFF');background:url(about:blank);background:rgba(255,255,255,0.5);z-index:9;}
:root.pop_see_360pic.prev_arrow,
:root.pop_see_360pic.pause_arrow,
:root.pop_see_360pic.next_arrow{filter:none;}
.pop_see_360pic.prev_arrow{left:53px;border-radius:10px000;}
.pop_see_360pic.next_arrow{left:195px;border-radius:010px00;}
.pop_see_360pic.prev_arrow:hover,
.pop_see_360pic.pause_arrow:hover,
.pop_see_360pic.next_arrow:hover{font-size:11px;}
.pop_see_360pic.pic_boximg{width:auto;height:240px;}
.pop_see_360pic{margin:10px;}
.pop_see_360pic.loading{position:absolute;top:0;left:0;background:#ebebeburl(网页链接)no-repeat134px78px;width:320px;height:240px;z-index:998;text-indent:-999px;}
.pic_box_inner{position:absolute;width:5000px;overflow:hidden;*zoom:1;}
.pic_box_innerimg{float:left;}
javascript:window.onload=function(){varpic360play=function(){this.initialize()}pic360play.prototype={
initialize:function(){
varoThis=this;
this.popseebox=document.getElementById("popseebox");
this.pic360load=document.getElementById("pic360load");
this.oPrev=document.getElementById("prev");
this.opause=document.getElementById("pause");
this.oNext=document.getElementById("next");
this.timeout=0;
this.picList=document.getElementById("picListItem");
this.oScrollIner=document.getElementById("pic_box_inner");
this.oScrollBox=this.oScrollIner.parentNode;
this.oScrollImg=this.oScrollBox.getElementsByTagName("img")[0];
/*=============copyimgforscroolnospace===========*/
this.oScrollImgcopy=this.oScrollImg.cloneNode(true);
this.oScrollIner.appendChild(this.oScrollImgcopy);
/*===========bindclosepic360playpopupevent==========*/
document.getElementById("close").=function(){
oThis.close(popseebox);
}
/*==============resetfirstimgandlayout===============*/
oThis.resetImg();
/*==============giveperlinktabspic=================*/
oThis.picList.=function(e){
e=window.event?window.event:e;
varwho=e.target?e.target:e.srcElement;
if(who.nodeType==1&&who.tagName=="A"&&who.getAttribute("imgurl")&&oThis.oScrollImgcopy.src!=who.getAttribute("imgurl")){
oThis.pic360load.style.display="block";
varnewimg=newImage();
newimg.src=who.getAttribute("imgurl");
newimg.onload=function(){
oThis.oScrollImg.src=oThis.oScrollImgcopy.src=who.getAttribute("imgurl");
oThis.oScrollImg=oThis.oScrollBox.getElementsByTagName("img")[0];
oThis.oScrollImgcopy=oThis.oScrollBox.getElementsByTagName("img")[1];
oThis.pic360load.style.display="none";
clearTimeout(oThis.timeout);
oThis.resetMiddle();
oThis.timeout=setInterval(function(){
oThis.prev(oThis);
},16);
}
returnfalse;
}
};
/*============playpic=============*/
this.oPrev.=function(){
clearTimeout(oThis.timeout);
oThis.timeout=setInterval(function(){
oThis.prev();
},16);
}
this.oNext.=function(){
clearTimeout(oThis.timeout);
oThis.timeout=setInterval(function(){
oThis.next();
},16);
}
this.opause.=function(){
clearTimeout(oThis.timeout);
}
},
getStyle:function(elem,name){
if(elem.style[name]){
returnelem.style[name];
}
elseif(elem.currentStyle){
returnelem.currentStyle[name];
}
elseif(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/[A-Z]/g,"-$1");
name=name.toLowerCase();
vars=document.defaultView.getComputedStyle(elem,'');
returns&&s.getPropertyValue(name);
}
returnnull;
},
prev:function(){
if(parseFloat(this.oScrollIner.style.left)parseFloat(this.getStyle(this.oScrollBox,"width"))-this.oScrollImg.width)
this.oScrollIner.style.left=parseFloat(this.oScrollIner.style.left)-this.oScrollImg.width+"px";
this.oScrollIner.style.left=parseFloat(this.oScrollIner.style.left)+1+"px";
},
close:function(obj){
obj.style.display="none";
returnfalse;
},
resetImg:function(){
varpicListItemLink=this.picList.getElementsByTagName("a");
varoThis=this;
oThis.oScrollImg.src=oThis.oScrollImgcopy.src=picListItemLink[1].getAttribute("imgurl");
varresetImg=newImage();
resetImg.src=picListItemLink[1].getAttribute("imgurl");
resetImg.onload=function(){
//resetimglocationmiddle
oThis.resetMiddle();
oThis.pic360load.style.display="none";
oThis.timeout=setInterval(function(){
oThis.prev(oThis);
},16);
}
},
resetMiddle:function(){
this.oScrollIner.style.left=-(this.oScrollImg.width/2-parseFloat(this.getStyle(this.oScrollBox,"width"))/2)+"px";
}}newpic360play();}
