【原创】实现⼀个简单的移动端左右滑动翻页+点击下标翻页
利⽤：HTML5+CSS+Js
//【如何做⼀个简单的⼿机端页⾯的翻页】
//第⼀步：创建移动端页⾯内  HTML + CSS  【注】可⽤弹性布局  但需要注意的是  外层盒⼦的定位
//第⼆步： 思考问题  要实现怎样的效果？
//1. ⼿指滑动时触发事件【左右】两个⽅向html如何设置图片滚动
//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  = ElementsByClassName('tab2')[0];  //获取到ul 思路： ⽤ul定位来实现页⾯的切换 （ul的宽度设置成
innerWind * 4）
var li2  = ElementsByClassName('li2');  //索引值不确定  且不写先
var tab3 = document.querySelector('#tab3');
var li3  = document.querySelectorAll('.li3');
// 设置默认的第⼀个下标的颜⾊
li3[0].lor = '#58bc58';
//  封装⼀个函数⽤于清空下标 的颜⾊
function delite(){
for(var i = 0;i < li3.length; i++){
li3[i].lor = '';
}
}
// 添加⼿指事件  【注】 这⾥的原理和拖拽⼀模⼀样  （⼿指按下和 ⼿指移动是 时  必须给给记录光标位置）
//  ⼿指按下时触发  记录⿏标移动坐标
tab2.addEventListener('touchstart',function(e){
postion.startX = e.touches[0].clientX;
postion.startY = e.touches[0].clientY;
})
//  ⼿指拖动时触发  记录⿏标移动坐标
tab2.addEventListener('touchmove',function(en){
move();  //当⼿指滑动时触发函数  改变ul的定位
})
//  ⼿指移开时 设置UL的定位 【注】有两种情况  超过绝对值/不超过绝对值
tab2.addEventListener('touchend',function(vent){
move(true);  //⼿指松开时调⽤调⽤函（函数⽤于判断 ：滑动的距离是否超过绝对值      1.超过  (滑动到下⼀页) 2.不超过 (位置定位在当前页)）
})
function move(_end){
var x = postion.startX - dX;//  定义X轴滑动时的绝对值
var y = postion.startY - dY;
//滑动效果
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].lor= '#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].lor = '#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].lor = '#58BC58';//给相同索引值的下标添加颜⾊
postion.index --; //变量跟新
}
else{
tab2.style.left = `${(postion.index - 1)*innerWidth *-1}px`;//没有超过绝对值是  定位在当前位置
li3[postion.index - 1].lor= '#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].lor= '#58BC58';//给当天下标添加颜⾊
}
})
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。