【原创】实现一个简单的移动端左右滑动翻页+ 点击下标翻页 利用：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',f