用HTML5+CSS+Js实现一个简单的移动端左右滑动翻页+点击下标翻页

用HTML5+CSS+Js实现一个简单的移动端左右滑动翻页+点击下标翻页

//【如何做一个简单的手机端页面的翻页】
//第一步：创建移动端页面内  HTML + CSS  【注】可用弹性布局   但需要注意的是  外层盒子的定位
//第二步： 思考问题  要实现怎样的效果？
		//1. 手指滑动时触发事件【左右】两个方向  
		//2.点击footer部分的下标实现切换效果 
		//3.点击footer部分的下标实现下标颜色变化


//第三步；编写JS代码



 //添加监听事件

	document.addEventListener('DOMContentLoaded',function(){
		
    //   创建一个数组用于调用数组属性值     或者  方便【数值】的更改    【注】可以用数组 /对象  但对象更方便我们的使用
		var postion = {
			startX:0,
			startY:0,
			endX:0,
			endY:0,
			baseMoveX: window.innerHeight / 3,
			index:1
		}
		 
		//     获取页面元素  比不可少的一个步骤
	var tab2  = document.getElementsByClassName('tab2')[0];	//获取到ul 思路： 用ul定位来实现页面的切换 （ul的宽度设置成  innerWind * 4）
	var li2   = document.getElementsByClassName('li2');	//索引值不确定  且不写先
	var tab3 = document.querySelector('#tab3');	
	var li3  = document.querySelectorAll('.li3');	



	     // 设置默认的第一个下标的颜色
	     li3[0].style.color = '#58bc58';
	     //  封装一个函数用于清空下标 的颜色
	     function delite(){
	     	 for(var i = 0;i < li3.length; i++){
				li3[i].style.color = '';
			} 
	     }

		
		// 添加手指事件	【注】 这里的原理和拖拽一模一样  （手指按下和 手指移动是 时  必须给给记录光标位置）			
				//  手指按下时触发   记录鼠标移动坐标
				tab2.addEventListener('touchstart',function(e){				
						postion.startX = e.touches[0].clientX;
						postion.startY = e.touches[0].clientY;
				})
				
				//  手指拖动时触发   记录鼠标移动坐标
				tab2.addEventListener('touchmove',function(en){
						postion.endX = en.touches[0].clientX;
						postion.endY = en.touches[0].clientY;
						move();   //当手指滑动时触发函数   改变ul的定位
						
				})
				
				//  手指移开时 设置UL的定位 【注】有两种情况   超过绝对值/不超过绝对值
				tab2.addEventListener('touchend',function(vent){
								   
					    move(true);  //手指松开时调用调用函（函数用于判断 ：滑动的距离是否超过绝对值       1.超过  (滑动到下一页) 2.不超过 (位置定位在当前页)）
				})
									
				function move(_end){
					  	var x = postion.startX - postion.endX;//  定义X轴滑动时的绝对值
					  	var y = postion.startY - postion.endY;
					 
					  	//滑动效果
					     if(postion.index < li2.length){//  第一种情况==========left    [用if 判断：索引值是 1-3的时候可以 向左滑动  改变 ul的定位 【注】因为超出会造成用户滑动出现空白页面   ]
					     	
					     					     						     	
						    if(x > 0){// 计算公式：  起点位置 - 终点位置   = x;  如果 x > 0  说明滑动的方向是左边
						    	//to left					   	
					                tab2.style.left = `${((postion.index - 1) * innerWidth + x) * -1}px` ;//  滑动是改变ul定位  【注】此时的 X为正值 
					                
							    	if(_end){//   手指松开时判读函数 是否为true  是就执行   否不执行
							    		
							    		   delite();// 清空上一页下标颜色
							    	        
							    		
							    		if(Math.abs(x) >= postion.baseMoveX){// .判断：if 滑动的距离或者等于  移动的基础值  那么翻页到下一页   （否则 保留位置是当前页）  【注】Math.abs(x)里面的   X 是【正数】
							    									    									    									    		
							    	        tab2.style.left = `${postion.index * innerWidth *-1}px`;//1*375*-1.......
							    	        li3[postion.index].style.color= '#58BC58';//写在前面  ul到第几页  就给当天 li对应的 下标加颜色
							    	        postion.index ++;//【注】【重点】【重点】变量跟新  index  【解】变量跟新的作用：第一个滑动超过 绝对值 索引值变为2  第二次超过索引值变为3  。。。。。。（用于计算ul的定位）			
							       
							    	    }
							    		 
							    		else{
							    			tab2.style.left = `${(postion.index -1)*innerWidth *-1}px`;//0*375*-1.......
							    			li3[postion.index-1].style.color = '#58BC58';//给当前页的下标 添加下标颜色   【注】定位的下标 与 改变颜色的下标是一样的
							    		}
							           
							    	}
							    
						    }
						    
					     }      
					     if(postion.index  >  1 && postion.index < li2.length + 1){//第二种情况===========right	  【注】此时的index = 1  为了确保在第二张和第四次 才能往右滑动    				    				     	
							    if(x < 0){//计算公式：  起点位置 - 终点位置   = x;  如果 x < 0  说明滑动的方向是右边
							    
					                tab2.style.left = `${((postion.index - 1) * innerWidth + x) * -1}px`;//滑动是改变ul的定位
					     			if(_end){//手指松开时判读函数 是否为true  是就执行   否不执行
					     				    delite();//清空上一页下标颜色				                    			                  	
									    		if(Math.abs(x) >= postion.baseMoveX){// 判断：if 滑动的距离或者等于  移动的基础值  那么翻页到下一页   （否则 保留位置是当前页）  【注】Math.abs(x)里面的   X 是【负数】
									    		
									    	        tab2.style.left = `${(postion.index -2)* innerWidth *-1}px`;//【注】如：在第二张图片滑动时  ul的定位 0,0点   计算公式：（2-2）*375 *-1 = 0；
									    	        li3[postion.index -2].style.color = '#58BC58';//给相同索引值的下标添加颜色
									    	        postion.index --; //变量跟新
									    	    }
									    		else{
									    			tab2.style.left = `${(postion.index - 1)*innerWidth *-1}px`;//没有超过绝对值是  定位在当前位置
									    			li3[postion.index - 1].style.color= '#58BC58';//改变 颜色
									    		}
									  		
									}				
							    }					 				  					    	
						 }
						 if(y < 0){
						    	//to top
						    }
						 if(y >0 ){
						    	//to dottom
						  }			
			    }
	  
				
					
		 //点击事件
		click()
		function click(){
		   
		    //添加自定义类名  【用来做下标】
			 for(var i =0;i<tab3.children.length; i++){
				     	li3[i].dataset.idx = i;// 0 1 2 3 
				     	
			 }
									
			 tab3.addEventListener('touchstart',function(e){
		         	e = e || window.event;//事件 event属性
		  	        var target = e.target || e.srcElement;//兼容写法
			   
			     	if(target.className === 'li3'||target.parentNode.className ==='li3' ){//【注】为了确保 不管点击大子元素还是 li  都执行这段代码
						var idx = target.parentNode.dataset.idx;//只写了一种情况
						tab2.style.left = `${idx* innerWidth *-1}px`;//index = 0 / 1/ 2/ 3 
						
						 delite();//清空坐标颜色
												
				        li3[idx].style.color= '#58BC58';//给当天下标添加颜色			       			     	
					}			
			})																
		}