原生JS --360度全景展示

介绍：本案是鼠标任意在桌面上（左右）滑动，展示360度各个角度的展示图。

实现方法：要各个角度的图片（n张），图片名序号排列（0,1,2,3……n）,通过鼠标点击事件（document.onmousedown），鼠标滑动事件（document.onmousemove）和鼠标离开事件（document.onmouseup）进行控制。

首先准备img文件

原生JS --360度全景展示

完整的html文件


<!DOCTYPE html>
<html>

	<head>
		<style>
			html,body {height:100%;}
			body {margin:0;}
			img {width:640px; height:378px; position:absolute; left:50%; top:50%; margin-top:-189px; margin-left:-320px;}
		</style>
		<meta charset="utf-8" />
		<title>360度全景展示</title>
		<script>
			window.onload=function(){
				//加载所有图片
				for(var i=1;i<=76; i++){
					var img = document.createElement("img");
					img.src = "img/img/"+i+".jpg";
					img.style.display = "none";
					document.body.appendChild(img);
				}
				//伪数组  instanceof NodeList
				var imgs = document.getElementsByTagName("img");
				var lastIndex = 0;  // 当前横坐标坐标
				var startX = 0;    // 记录鼠标点下时的横坐标
				var index = 0;     //  记录鼠标移动的坐标距离
				var prevImg = null;
				document.onmousedown = function(event){
					startX = event.clientX;
					//console.log(startX)
					document.onmousemove = function(event){
						//随着移动，更换图片
						var x = event.clientX;
						var dis = x - startX;
						console.log(dis);
						if(dis >= 0) {  
							index = (Math.floor(dis/20) + lastIndex)%77;
						} else {
							index = (77+Math.floor(dis/20) + lastIndex)%77;
							console.log(index)
						}
						if(prevImg) prevImg.style.display = "none";
						imgs[index].style.display = "block";
						document.title = index;
						prevImg = imgs[index];
					}
				};
				document.onmouseup = function(event){
					//鼠标松开时记录位置
					lastIndex = index;
					document.onmousemove = "";
				}
			};
		</script>
	</head>
	<body>
		<div style="z-index: 100; opacity: 0.01; background: black; position: fixed; width: 100%; height: 100%;"></div>
		<img id="img0" src="img/img/0.jpg" />
	</body>

</html>

好了，案例就实现了