360度全景圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#imgBox{
height: 378px;
width: 640px;
position: relative;
margin:100px auto;
}
#imgBox img{
}
</style>
</head>
<body>
<div id="imgBox"><img src="img/miaov (0).jpg" height="378" width="640" id="img1" ></div>
<script>
var imgBox=document.getElementById("imgBox");
//預加載 防止卡頓
for(var i=1;i<77;i++){
(function(oImg){
var img=new Image();
img.onload=function(){
oImg.src=this.src;
}
img.src="img/miaov ("+i+").jpg";
oImg.style.display="none";
imgBox.appendChild(oImg);
})(document.createElement("img"))
}
var allImgs=document.getElementsByTagName("img");//所有圖片元素
var lastImg=document.getElementById("img1");//上一張圖片元素
var speed=0; //當擡起鼠標那一刻的速度
var lastPos=0;//上一次鼠標move的位置
var x=0; // 記錄鼠標move的位置
var timer=null;//定時器
document.onmousedown=function(event){
clearInterval(timer);
var ev=event || window.event;
disX=ev.clientX-x; //鼠標按下的位置
document.onmousemove=function(event){
var ev=event || window.event;
x=ev.clientX-disX;
move();
speed=x-lastPos;//此時的速度 根據你鼠標移動的快慢不同 大小不同
lastPos=x;
return false; //為了拖動的時候防止選中圖片
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
timer=setInterval(function(){
x+=speed;
move();
}, 1000/60)
}
return false; //為了拖動的時候防止選中圖片
}
function move(){
speed>0?speed--:speed++;
if(speed==0){
clearInterval(timer);
}
var l=parseInt(x/10);
if(l>0){
l=l%77;
}
else{
l=l+-Math.floor(l/77)*77;
}
if(allImgs[l]!=lastImg){
lastImg.style.display="none";
allImgs[l].style.display="block";
lastImg=allImgs[l];
}
}
</script>
</body>
</html>
360度全景圖片