一，js代码:
<html> <head> <meta charset="utf-8"/> <title>测试</title> <script src="pcpageapp.js"></script> <style type="text/css"> .pageOne{ width:800px; position: absolute; height: 100%; text-align: center; font-size: 60px; } </style> </head> <body style="padding: 0px;margin: 0px;"> <div style="800px;margin-left: calc((100vw - 800px) / 2);height: 60px;line-height: 60px;background: #ffff00;text-align: center;"> title </div> <div id="main" style="800px;margin-left: calc((100vw - 800px) / 2);height: 600px;background: #ff0000;position:relative;"> <!-- --> <div class="container" style="position:absolute;top:0px;margin-top:0px;left:0px;800px;height:100%;overflow: hidden;"> <div style="100%;height:100%;position: relative;"> <div id="viewport" class="viewport" style="300%;position: relative;display: -webkit-box;height: 100%;"> <div class="pageOne" id="leftPage" data-idx='1' style="left: 0px;background:Sienna;">1</div> <div class="pageOne" id="middlePage" data-idx='2' style="left: 800px;background:DarkViolet;">2</div> <div class="pageOne" id="rightPage" data-idx='3' style="left: 1600px;background:Orange;">3</div> </div> </div> </div> </div> <div style="800px;margin-left: calc((100vw - 800px) / 2);height: 60px;background: #ff00ff;text-align: center;"> <button onclick="goPrev()">上一页</button><button onclick="goNext()">下一页</button> </div> <script> //页面的宽度 var pageWidth = 800; //左侧页面的left值 let leftPLeft = "0px"; //中间页面的left值 let middlePLeft = pageWidth+"px"; //右侧页面的left值 let rightPLeft = pageWidth*2+"px"; //当前显示的是第几页 var nowPageIdx = 1; //滑动的方向 var direction = ""; //页面的内容 var pageArr = [ 1,2,3,4,5, 6,7,8,9,10, 11,12,13,14,15, 16,17,18,19,20 ]; //是否正在滑动 let isSliding = false; //页面滑动 function goPage(pageIdx) { //设置为正在滑动 isSliding = true; let pageMax = pageArr.length; if (pageIdx < 1) { pageIdx = 1; } if (pageIdx > pageMax) { pageIdx = pageMax; } let dest_offset = getOffsetByPageIdx(pageIdx); var time=0.5; document.getElementById('viewport').style.webkitTransition = 'all ' + time + 's ease-in-out'; document.getElementById('viewport').style.webkitTransform = 'translate(-'+dest_offset+'px, 0)'; //滑动完成后，设置当前居中的页面id nowPageIdx = pageIdx; } //滑动后设置三个页面的内容 function setPageIdxContent() { let pageIdx = nowPageIdx; let pageMax = pageArr.length; let destOffset = 0; //偏移位置 //左侧页面索引 let leftIdx = 0; //中间页面索引 let middleIdx = 0; //右侧页面索引 let rightIdx = 0; if (pageIdx == 1){ //第一页,滑至最左侧 leftIdx = 1; middleIdx = 2; rightIdx = 3; destOffset = 0; } else if (pageIdx == pageMax){ //最后一页,滑至最右侧 leftIdx = pageMax-2; middleIdx = pageMax-1; rightIdx = pageMax; destOffset = pageWidth*2; } else { //中间页面,显示在中间 leftIdx = pageIdx-1; middleIdx = pageIdx; rightIdx = pageIdx+1; destOffset = pageWidth; } //getThreePos(); console.log("leftIdx:"+leftIdx+";middleIdx:"+middleIdx+";rightIdx:"+rightIdx+";destOffset:"+destOffset); setAllPage(leftIdx,middleIdx,rightIdx); //滑动 var time=0; document.getElementById('viewport').style.webkitTransition = 'all ' + time + 's ease-in-out'; document.getElementById('viewport').style.webkitTransform = 'translate(-'+destOffset+'px, 0)'; //滑动完成 isSliding = false; } //设置三个页面 function setAllPage(leftIdx,middleIdx,rightIdx) { var arr_div = document.getElementById("viewport").children; //如果是向左滑动 if (direction == 'left') { let isIdxLeft = 0; for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == rightPLeft) { // arr_div[i].style.left = '16px'; console.log("左侧idx:"+arr_div[i].dataset.idx); console.log("rightIdx:"+rightIdx); if (arr_div[i].dataset.idx == rightIdx){ isIdxLeft = 1; } } } if (isIdxLeft == 0) { changeLeft(leftIdx,middleIdx,rightIdx); } } //如果是向右滑动 if (direction == 'right') { let isIdxRight = 0; for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == leftPLeft) { // arr_div[i].style.left = '16px'; console.log("左侧idx:"+arr_div[i].dataset.idx); console.log("leftIdx:"+leftIdx); if (arr_div[i].dataset.idx == leftIdx){ isIdxRight = 1; } } } if (isIdxRight == 0) { changeRight(leftIdx,middleIdx,rightIdx); } } } //向左滑动时设置内容 function changeLeft(leftIdx,middleIdx,rightIdx) { var arr_div = document.getElementById("viewport").children; for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == rightPLeft) { arr_div[i].style.left = '16px'; } } for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == middlePLeft) { arr_div[i].style.left = rightPLeft; } } for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == leftPLeft) { arr_div[i].style.left = middlePLeft; } } for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == '16px') { arr_div[i].style.left = leftPLeft; if (arr_div[i].dataset.idx != leftIdx) { arr_div[i].dataset.idx = leftIdx; arr_div[i].innerHTML = leftIdx; } } } } //向右滑动时设置内容 function changeRight(leftIdx,middleIdx,rightIdx) { var arr_div = document.getElementById("viewport").children; for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == leftPLeft) { arr_div[i].style.left = '16px'; } } for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == middlePLeft) { arr_div[i].style.left = leftPLeft; } } for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == rightPLeft) { arr_div[i].style.left = middlePLeft; } } for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].style.left == '16px') { arr_div[i].style.left = rightPLeft; if (arr_div[i].dataset.idx != rightIdx) { //处理: arr_div[i].dataset.idx = rightIdx; arr_div[i].innerHTML = rightIdx; } } } } //根据idx得到位置，供滑动动画使用 function getOffsetByPageIdx(pageIdx) { let offset = 0; var arr_div = document.getElementById("viewport").children; for(var i = 0; i < arr_div.length; i++) { if (arr_div[i].dataset.idx == pageIdx) { return parseInt(arr_div[i].style.left); } } return offset; } //前一页 function goPrev() { if (isSliding == true){ return false; } direction = 'left'; goPage(nowPageIdx-1); setTimeout(setPageIdxContent, 500); } //后一页 function goNext() { if (isSliding == true){ return false; } direction = 'right'; goPage(nowPageIdx+1); setTimeout(setPageIdxContent, 500); } </script> </body> </html>
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
二，测试效果
