javascript:每次只加载3个页面的幻灯(chrome 105.0.5195.125)

标签：5195.125 arr leftIdx chrome style var div 105.0 left
一，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="width:800px;margin-left: calc((100vw - 800px) / 2);height: 60px;line-height: 60px;background: #ffff00;text-align: center;">
        title
    </div>
<div id="main" style="width: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;width:800px;height:100%;overflow: hidden;"> 
    <div style="width:100%;height:100%;position: relative;">  
      <div id="viewport" class="viewport" style="width: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="width: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
说明：作者:刘宏缔邮箱: [email protected]
二，测试效果

三，查看chrome的版本:

标签：5195.125,arr,leftIdx,chrome,style,var,div,105.0,left
From： https://www.cnblogs.com/architectforest/p/16747093.html
javascript:每次只加载3个页面的幻灯(chrome 105.0.5195.125)

一，js代码:

二，测试效果

三，查看chrome的版本:

相关文章

赞助商

阅读排行
