【原创】实现一个简单的移动端左右滑动翻页+ 点击下标翻页 利用：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     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';//给当天下标添加颜色          
}
})
}


})