纯无聊之作, 做着玩的
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>html,body {padding: 0;margin: 0;height: 100%;overflow: hidden;width: 100%;}#father {height: 100%;position: absolute;top: 0;left: 0;width: 300%;}.box {height: 100%;width: 33.333%;float: left;position: relative;}.box1 {background-color: pink;}.box2 {background-color: skyblue;}.box3 {background-color: gray;}span {display: block;position: absolute;top: 0;left: 0;background-color: #fff;height: 100%;width: 100%;}.touchMe {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #fff;transform-style: preserve-3d;transition: all 1s;}.forword {transform: translateZ(1px);}.back {transform: rotateY(180deg);}ul {position: absolute;bottom: 100px;left: 50%;transform: translateX(-50%);}li {list-style: none;width: 20px;height: 20px;background-color: #fff;border-radius: 50%;float: left;margin-right: 20px;}</style></head><body><div id="father"><div class="box1 box"><div class="touchMe"><span class="forword">长按我1秒</span><span class="back">我是第1页</span></div></div><div class="box2 box"><div class="touchMe"><span class="forword">长按我1秒</span><span class="back">我是第2页</span></div></div><div class="box3 box"><div class="touchMe"><span class="forword">长按我1秒</span><span class="back">我是第3页</span></div></div></div><ul><li style="background-color: black"></li><li></li><li></li></ul></body><script>var count = 0var startX = 0var endX = 0var left = 0var num = 1var sunWidth = document.getElementsByClassName('box1')[0].offsetWidthvar box = document.getElementById('father')var routeBox = document.querySelectorAll('.touchMe')var boxSun = document.querySelectorAll('.touchMe')box.ontouchstart = function(e) {event.preventDefault()startX = e.touches[0].pageXfor (let i = 0;i<routeBox.length;i++) {if(routeBox[i].bool) {routeBox[i].style.transform="translate(-50%,-50%) rotateY(0deg)"}}}box.ontouchend = function(e) {endX = e.changedTouches[0].pageXif(startX>endX && Math.abs(moveX)>50) {count++if(count > 2) {count = 2}fn(box,-sunWidth*count)}if (startX<endX && Math.abs(moveX)>50) {count--if(count < 0) {count = 0}fn(box,-sunWidth*count)}if(Math.abs(moveX)<50) {fn(box,-sunWidth*count)}for(let j =0;j<li.length;j++) {li[j].style.backgroundColor = 'white'}li[count].style.backgroundColor = "black"}box.ontouchmove=function(e) {moveX = startX-e.touches[0].pageXbox.style.left = -moveX+left + 'px'}//页面滑动动画function fn(ele, position) {clearInterval(ele.timer);ele.timer = setInterval(function () {var step = position > ele.offsetLeft ? 10 : -10;ele.style.left = ele.offsetLeft + step + 'px';if (Math.abs(position - ele.offsetLeft) <= Math.abs(step)) {ele.style.left = position + 'px';clearInterval(ele.timer);}left = ele.offsetLeft}, 10)}for (let i = 0; i<routeBox.length;i++) {routeBox[i].ontouchstart = function(e) {if(num = 1) {timeOutEvent = setTimeout(function(){this.style.transform="translate(-50%,-50%) rotateY(180deg)"this.bool = true;}.bind(this),1000);}}routeBox[i].ontouchend = function(e){return false; }}//小圆点切换功能var li = document.querySelectorAll('li')for (let i = 0; i<li.length;i++) {li[i].onclick=function() {for(let j =0;j<li.length;j++) {li[j].style.backgroundColor = 'white'}li[i].style.backgroundColor = "black"fn(box,-sunWidth*i)}}</script></html>
如果觉得《移动端页面切换小demo》对你有帮助，请点赞、收藏，并留下你的观点哦！
