H5+CSS3 实现分页功能

Html5实现自己的分页加载
Html代码：
<div class="dv-big-page">
<div class="dv-margin-left"></div>
<div class="dv-page-box">
<div class="dv-page-position-box">
<li class="li_prew"><<</li>
<div id="div_li_btn_mid">
<div class="dv_btns_box">
<li class="li_btn">1</li>
<li class="li_btn">2</li>
<li class="li_btn">3</li>
<li class="li_btn">4</li>
<li class="li_btn">5</li>
<li class="li_btn">6</li>
<li class="li_btn">7</li>
</div>
</div>
<li class="li_next">>></li>
</div>
</div>
</div>

Css样式：
 

.dv-big-page{
clear:both;
960px;
height: 30px;
margin-left:auto;
margin-right:auto;
}
.dv-page-position-box{
320px;
height:30px;
margin:auto;
}
.dv-margin-left{
float:left;
210px;
height: 30px;
}
.dv-page-box{
float:left;
margin-top:40px;
margin-bottom:40px;
750px;
height: 30px;
}
.li_prew{
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{
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{
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{
280px;
}
.li_next:hover,
.li_prew:hover{
cursor: pointer;
line-height:28px;
font-size: 18px;
background-color: #00bcd4;
color:#fff;
}
#div_li_btn_mid{
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