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;
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