h5 html分页样式,原创H5分页器

标签： 分页

正文

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

分页器

ul{

display: flex;

list-style: none;

}

#pageIndexS{

display: flex;

}

ul li{

width: 100px;

height: 50px;

display: inline-block;

line-height: 50px;

text-align: center;

border: 1px solid rgba(102, 100, 104, 0.32);

cursor: pointer;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

user-select:none;

}

• 上一页
• 下一页

let all=10;//总页数

let page=1;//当前页

let daindex=[1,2,3,4,5];//默认显示页码区间

let m=document.getElementById('pageIndexS');//分页容器

function indexS(e) {

m.innerHTML='';//数据清除

for (let i in e){

m.innerHTML+=`

${e[i]}`;//添加节点

}

}

indexS(daindex);//调用分页

function pageClick(e) {

if(e==0){//上一页

if(page>1){

page--;

liClick(page)

}

}else {//下一页

if(page

page++;

liClick(page)

}

}

}

function liClick(i) {//点击更新页码

page=i;//赋值当前页面

let j=0;//遍历索引

if(page

if(i>2&&i

while (j<5){

daindex[j]=Number(i)+j-2;//更新页码区间

j++

}

}else if(i==2){//页码=2时在数组下标1位置

while (j<5){

daindex[j]=Number(i)+j-1;

j++

}

}

}

indexS(daindex);//更新页码区间数据

let a=document.getElementsByClassName('ca'+i)[0];//选中页码展示状态更改

a.style.color="white";

a.style.background="#00796B"

}

image.png