webapp圖片滑動組件

時間 2019-11-15
標籤 webapp 圖片滑動組件欄目無線简体版
原文原文鏈接
在慕課網上看到的課程，webapp圖片滑動組件，講師mark,講的很是好，跟着老師的代碼本身抄寫了一遍，也算增長些印象javascript
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style>
   html{height:100%;}
	body{
	   height:100%;
		margin: 0;
		padding: 0;
		background: #333;
		overflow: hidden;
	}
	/* 隱藏畫布外的內容 */
	#canvas{
		height: 100%;
		width: 100%;
		overflow: hidden;
	}
	li,ul{
		list-style: none;
		margin: 0;
		padding: 0;
		height: 100%;
		overflow: hidden;
	}
	/* 使得圖片居中 webkit-box */
	li{
	position:absolute;
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
	}
	li img {
		max-width: 100%;
		max-height: 100%;
	}
	
</style>
</head>
<body>
	<!-- 外層畫布 -->
	<div id="canvas">
	
	</div>
   <script type="text/javascript">
   //全部的數據
   var list = [{
			height: 950,
			width: 800,
			img: "imgs/1.jpg"
		},
		{
			height: 1187,
			width: 900,
			img: "imgs/2.jpg"
		},
		{
			height: 766,
			width: 980,
			img: "imgs/3.jpg"
		},
		{
			height: 754,
			width: 980,
			img: "imgs/4.jpg"
		},
		{
			height: 493,
			img: "imgs/5.jpg",
			width: 750
		},
		{
			height: 500,
			img: "imgs/6.jpg",
			width: 750
		},
		{	
			height: 600,
			img: "imgs/7.jpg",
			width: 400
		}];
		
		//構造函數
		function slider(opts){
		//構造函數須要的參數
			this.wrap=opts.dom;
			this.list=opts.list;
			//構造三部曲
			this.init();
			this.renderDom();
			this.bindDom();
		}
		//init()函數
		slider.prototype.init=function(){
		this.radio=window.innerHeight/window.innerWidth;
		this.scaleW=window.innerWidth;
		//當前圖片的索引
		this.idx=0;
		}
		//renderDom()函數
		slider.prototype.renderDom=function(){
		var wrap=this.wrap;
		var scaleW=this.scaleW;
		var data=this.list;
		var len=data.length;
		var radio=this.radio;
		//建立ul元素
		this.outer=document.createElement("ul");
		for(i=0;i<len;i++){
			//循環建立li元素
			var li=document.createElement("li");
			var item=data[i];
			//下面的寬度能夠加px也能夠不加，能夠直接是數值
			li.style.width=scaleW +"px";
			li.style.webkitTransform='translate3d(' + i*scaleW +'px,0,0)';//此行的px不能省略
			if(item){
				if(item.height/item.width>this.radio){
				//根據圖片的長寬比來建立li裏面的圖片
				li.innerHTML='<img height="' + window.innerHeight+'" src="'+item['img']+'" />'
				}else{
				li.innerHTML='<img width="' + window.innerWidth+'" src="'+item['img']+'" />'
				}
			
			}
			this.outer.appendChild(li);
		
		}
		wrap.style.height=window.innerHeight + "px";
		wrap.appendChild(this.outer);
		}
		// bindDom()函數,綁定dom事件
		slider.prototype.bindDom=function(){
			var self=this;
			var scale=self.scaleW;
			var outer=self.outer;
			var len=self.list.length;
			
			//手指按下的處理事件
			var startHander=function(evt){
			    //記錄手指按下的座標
				self.startX=evt.touches[0].pageX;
				
				//清除偏移量
				self.offsetX=0;
				//記錄剛剛開始按下的時間
				self.startTime=new Date() + 1;
			};
			
			//手指移動的處理事件
			var moverHander=function(evt){
				//兼容chrome android 阻止瀏覽器默認行爲
				evt.preventDefault();
				//計算手指的偏移量
				self.offsetX=evt.touches[0].pageX-self.startX;
				//console.log(self.offsetX);
				var lis=outer.getElementsByTagName("li");
				//起始索引
				var i=self.idx-1;
				//結束索引
				var m= i+3;
				//最小化改變Dom屬性
				for(i;i<m;i++){
				lis[i]&&(lis[i].style.webkitTransition='-webkit-transform 0s ease-out');
				lis[i]&&(lis[i].style.webkitTransform='translate3d('+((i-self.idx)*self.scaleW + self.offsetX)+'px,0,0)');
				
				}
			
			};
			var endHander=function(evt){
			    var lis=outer.getElementsByTagName('li');
				var boundory=scale/6;
				var endTime=new Date()+1;
				if(endTime-self.startTime>800){
					if(self.offsetX>=boundory){
						//進入上一頁
						self.go('-1');
					}else if(self.offsetX<=-boundory){
						//進入下一頁
						self.go('+1');
					}else{
						//留在本頁
						self.go('0');
					}
				}else{
				//快操做
				//優化
				if(self.offsetX>50){
					//進入上一頁
					self.go('-1');
				}else if(self.offsetX<-50){
					//進入下一頁
					self.go('+1');
				}else{
					//留在本頁
						self.go('0');
				}
			}
			};
			outer.addEventListener('touchstart',startHander);
			outer.addEventListener('touchmove',moverHander);
			outer.addEventListener('touchend',endHander);
		
		}
		slider.prototype.go=function(n){
			var idx=this.idx;
			var cidx;
			var lis=this.outer.getElementsByTagName('li');
			var len=lis.length;
			var scale=this.scaleW;
			if(typeof n =='number'){
				cidx=idx;
			}else if(typeof n =='string'){
				cidx=idx + n*1;//字符串*數字等於數字
			}
			//當索引右超出
			if(cidx>len-1){
				cidx=len-1;
			}else if(cidx<0){
				cidx=0;
			}
			this.idx=cidx;

			lis[cidx].style.webkitTransition='-webkit-transform 0.2s ease-out';
			lis[cidx-1] && (lis[cidx-1].style.webkitTransition='-webkit-transform 0.2s ease-out');
			lis[cidx+1] && (lis[cidx+1].style.webkitTransition='-webkit-transform 0.2s ease-out');

			lis[cidx].style.webkitTransform='translate3d(0,0,0)';
			lis[cidx-1] && (lis[cidx-1].style.webkitTransform='translate3d(-'+ scale+'px,0,0)');
			lis[cidx+1] && (lis[cidx+1].style.webkitTransform='translate3d('+ scale+'px,0,0)');
			
		
		}
		//初始化Slider 實例
		new slider({
		dom:document.getElementById("canvas"),
		list:list
		});
   
   </script>

</body>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。