用HTML css3制作分页,H5+CSS3 实现分页功能

Html5实现自己的分页加载

Html代码：

<<

1234567

>>

Css样式：

.dv-big-page{

clear:both;

width: 960px;

height: 30px;

margin-left:auto;

margin-right:auto;

}

.dv-page-position-box{

width:320px;

height:30px;

margin:auto;

}

.dv-margin-left{

float:left;

width: 210px;

height: 30px;

}

.dv-page-box{

float:left;

margin-top:40px;

margin-bottom:40px;

width: 750px;

height: 30px;

}

.li_prew{

width: 38px;

height: 28px;

border: solid 1px #e3e3e3;

text-align: center;

list-style: none;

cursor: pointer;

float: left;

font-size: 18px;

color:#858585;

line-height:28px;

}

.li_btn{

width: 38px;

height: 28px;

border: solid 1px #e3e3e3;

text-align: center;

list-style: none;

cursor: pointer;

float: left;

line-height:28px;

font-size: 18px;

color:#858585;

}

.li_btn:hover{

cursor: pointer;

line-height:28px;

font-size: 18px;

background-color: #00bcd4;

color:#fff;

}

.li_next{

width: 38px;

height: 28px;

border: solid 1px #e3e3e3;

text-align: center;

list-style: none;

cursor: pointer;

float: left;

line-height:28px;

font-size: 18px;

color:#858585;

}

.dv_btns_box{

width: 280px;

}

.li_next:hover,

.li_prew:hover{

cursor: pointer;

line-height:28px;

font-size: 18px;

background-color: #00bcd4;

color:#fff;

}

#div_li_btn_mid{

width: 240px;

height: 30px;

float: left;

overflow: hidden;

}

Js代码：

//初始化分页

function initPageSelector(){

activePageButton();

initSelectPage();

}

function activePageButton(){

$(".li_btn").click(function(){

$(".li_btn").css("background-color","#fff");

$(".li_btn").css("color","#858585");

$(this).css("background-color","#00bcd4");

$(this).css("color","#fff");

});

}

/*

* 上衣页 下一页事件监听

*/

function initSelectPage(){

$(".li_next").click(function(){

document.getElementById("div_li_btn_mid").scrollLeft+=40;

});

$(".li_prew").click(function(){

document.getElementById("div_li_btn_mid").scrollLeft-=40;

});

}

效果截图：

————————————————

版权声明：本文为CSDN博主「sqyNick」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/u010670151/article/details/51262430

原文：https://www.cnblogs.com/baylor2019/p/11636643.html