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

})

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

猜你喜欢

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