首页 发现 帮助
注册 登录
shaogen1995
/
4dageModel
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

增加分页功能

shaogen1995 2 年之前
父节点
59644d197b
当前提交
7396f0888f
共有 5 个文件被更改，包括 147 次插入 和 13 次删除
合并视图 显示文件统计
  1. 2 0
      .gitignore
  2. 二进制
      img/bg.jpg
  3. 40 3
      index.html
  4. 28 1
      info.js
  5. 77 9
      js/ui.js

+ 2 - 0
.gitignore
查看文件 

@@ -0,0 +1,2 @@
 
+4dage/
 
+images/

二进制
img/bg.jpg
查看文件


+ 40 - 3
index.html
查看文件 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="ch-zh">
 
 
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
@@ -12,7 +12,7 @@
 
 </head>
 
 </head>
 
 <style>
 
 <style>
 
     .myTitle {
 
     .myTitle {
 
-        letter-spacing:4px;
 
+        letter-spacing: 4px;
 
         margin: 0 auto;
 
         margin: 0 auto;
 
         color: #fff;
 
         color: #fff;
 
         display: flex;
 
         display: flex;
 
@@ -31,18 +31,55 @@
 
         /* height: 100vh; */
 
         /* height: 100vh; */
 
         background-color: #285b5e;
 
         background-color: #285b5e;
 
     }
 
     }
 
+
 
+    .pageBox {
 
+        position: fixed;
 
+        z-index: 99;
 
+        right: 20px;
 
+        top: 10px;
 
+        display: flex;
 
+    }
 
+
 
+    .pageBox>div {
 
+        width: 24px;
 
+        height: 24px;
 
+        background-color: #fff;
 
+        cursor: pointer;
 
+        margin-left: 15px;
 
+        line-height: 24px;
 
+        text-align: center;
 
+        border-radius: 5px;
 
+        border: 1px solid #ccc;
 
+    }
 
+
 
+    .pageBox>div:hover {
 
+        background-color: #285b5e;
 
+        color: #fff;
 
+    }
 
+
 
+    .pageBox .active {
 
+        pointer-events: none;
 
+        background-color: #285b5e;
 
+        color: #fff;
 
+    }
 
 </style>
 
 </style>
 
 
 
 <body>
 
 <body>
 
     <div class="containers">
 
     <div class="containers">
 
         <div class="myTitle"></div>
 
         <div class="myTitle"></div>
 
         <ul class="con"> </ul>
 
         <ul class="con"> </ul>
 
+        <!-- 分页指示器 -->
 
+        <!-- <div class="pageBox">
 
+            <div class="active">1</div>
 
+            <div>2</div>
 
+            <div>3</div>
 
+        </div> -->
 
     </div>
 
     </div>
 
     <script src="./info.js"></script>
 
     <script src="./info.js"></script>
 
     <script src="js/jquery.js"></script>
 
     <script src="js/jquery.js"></script>
 
     <script src="js/ui.js"></script>
 
     <script src="js/ui.js"></script>
 
     <script>
 
     <script>
 
-        document.title=titleInfo
 
+        document.title = titleInfo
 
         $('.myTitle').text(titleInfo)
 
         $('.myTitle').text(titleInfo)
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 28 - 1
info.js
查看文件 

@@ -9,6 +9,12 @@ let titleInfo = '一房一册'
 
 // 是否开启模型自动旋转功能  开启:true  关闭:false
 
 // 是否开启模型自动旋转功能  开启:true  关闭:false
 
 let spinInfo = false
 
 let spinInfo = false
 
 
 
+// 是否开启分页  开启:true  关闭:false
 
+let pageOpen = true
 
+
 
+// 分页条数 在9-100之间
 
+let pageNum = 10
 
+
 
 //配置  模型文件名字
 
 //配置  模型文件名字
 
 // 左边的是编号
 
 // 左边的是编号
 
 // 右边的是 模型名称
 
 // 右边的是 模型名称
 
@@ -18,5 +24,26 @@ let spinInfo = false
 
 // 复制模板    '':``,
 
 // 复制模板    '':``,
 
 
 
 let objInfo = {
 
 let objInfo = {
 
-  'ybb': ``,
 
+  'ybb': `123`,
 
+  'nsr01': '南宋金叶子',
 
+  'nsr02': '南宋金铤',
 
+  'nsr03': '宋湖州石家镜',
 
+  'nsr04': '南宋青白瓷缠枝菊纹粉盒',
 
+  'nsr05': '龙泉窑青瓷渣斗',
 
+  'nsr06': '宋龙泉窑青瓷刻花高足杯',
 
+  'nsr07': '余姚官窑青釉狻猊出香',
 
+  'nsr08': '建窑兔毫盏',
 
+  'nsr09': '宋磁州窑褐彩人物纹枕',
 
+  'nsr10': '北宋大晟应钟',
 
+  'nsr11': '北宋景镇影青瓜校瓷盖壶',
 
+  'nsr12': '北宋婺州窑青釉瓷执壶',
 
+  'nsr13': '北宋影青釉瓷碗',
 
+  'nsr14': '北宋越窑青釉瓷花口杯',
 
+  'nsr15': '北宋越窑青釉鸟形瓷埙',
 
+  'nsr16': '古琴',
 
+  'nsr17': '南宋鱼形香囊',
 
+  'nsr18': '南宋青白瓷三足炉',
 
+  'nsr19': '南宋錾花金钗',
 
+  'nsr20': '北宋錾花鎏金银瓶',
 
+  'nsr21': '南宋官窑六瓣莲花瓷碗',
 
 }
 
 }

+ 77 - 9
js/ui.js
查看文件 

@@ -10,7 +10,73 @@
 
     }
 
     }
 
     let temp = GetQueryString('m')
 
     let temp = GetQueryString('m')
 
 
 
-        for(let k in objInfo){
 
+
 
+    // 获取总数组
 
+    const arrAll = []
 
+    for (let k in objInfo) {
 
+        arrAll.push({
 
+            id: k,
 
+            name: objInfo[k]
 
+        })
 
+    }
 
+
 
+    // 开启了分页得到的数组
 
+    let arr = []
 
+    // 总数组分割
 
+    let arrSpile = []
 
+
 
+
 
+    if (pageOpen) {
 
+        // 数据的总数
 
+        const total = arrAll.length
 
+
 
+        // 计算出分页的个数
 
+        const pageSize = Math.ceil(total / pageNum)
 
+        // 生成 分页 指示器 
+        const body = document.querySelector('body')
 
+        const pageBox = document.createElement('div');
 
+        pageBox.classList.add('pageBox')
 
+        for (let i = 0; i < pageSize; i++) {
 
+            const pageBoxSon = document.createElement('div');
 
+            pageBoxSon.innerHTML = i + 1
 
+            pageBox.appendChild(pageBoxSon)
 
+
 
+            // 当前的裁剪数据-联合数组类型
 
+            arrSpile.push(arrAll.slice(i * pageNum, (i + 1) * pageNum))
 
+        }
 
+        body.appendChild(pageBox)
 
+
 
+        // 为分页绑定点击事件
 
+        const pageDomSonAll = document.querySelectorAll('.pageBox div')
 
+        pageDomSonAll.forEach((v, i) => {
 
+            v.addEventListener('click', () => {
 
+                pageDomCreateFu(i)
 
+            })
 
+        })
 
+
 
+    } else arr = arrAll
 
+
 
+
 
+
 
+
 
+    // 向页面创建元素
 
+    const pageDomCreateFu = (acNum) => {
 
+
 
+        if (pageOpen) {
 
+            arr = arrSpile[acNum]
 
+            //高亮当前
 
+            const pageDomSonAll = document.querySelectorAll('.pageBox div')
 
+
 
+            pageDomSonAll.forEach(v => {
 
+                v.classList.remove('active')
 
+            })
 
+            pageDomSonAll[acNum].classList.add('active')
 
+        }
 
+
 
+        let ul = document.querySelector('.con');
 
+        ul.innerHTML = ''
 
+
 
+        arr.forEach(v => {
 
             let li = document.createElement('li');
 
             let li = document.createElement('li');
 
             let divWrap = document.createElement('div');
 
             let divWrap = document.createElement('div');
 
             let a = document.createElement('a');
 
             let a = document.createElement('a');
 
@@ -19,19 +85,21 @@
 
             divWrap.classList.add('case');
 
             divWrap.classList.add('case');
 
             a.classList.add('link-a');
 
             a.classList.add('link-a');
 
             // 判断地址栏有没有参数，有的话就跳Model2，没有logo
 
             // 判断地址栏有没有参数，有的话就跳Model2，没有logo
 
-            if(temp) a.href = `Model2.html?m=${k}`;
 
-            else a.href = `Model.html?m=${k}`;
 
+            if (temp) a.href = `Model2.html?m=${v.id}`;
 
+            else a.href = `Model.html?m=${v.id}`;
 
             div.classList.add('card-img');
 
             div.classList.add('card-img');
 
-            div.style = `background-image: url(images/${k}.jpg)`;
 
-            p.innerHTML = objInfo[k];
 
+            div.style = `background-image: url(images/${v.id}.jpg)`;
 
+            p.innerHTML = v.name;
 
             a.appendChild(div);
 
             a.appendChild(div);
 
             divWrap.appendChild(a);
 
             divWrap.appendChild(a);
 
             li.appendChild(divWrap);
 
             li.appendChild(divWrap);
 
             li.appendChild(p);
 
             li.appendChild(p);
 
-            fragment.appendChild(li); 
-        }
 
+            fragment.appendChild(li);
 
+        })
 
+        ul.appendChild(fragment);
 
+    }
 
+
 
+    pageDomCreateFu(0)
 
 
 
-    let ul = document.querySelector('.con');
 
-    ul.appendChild(fragment);
 
 
 
 })()
 
 })()