Html5实现自己的分页加载_h5分屏加载网页-优快云博客

本文链接：https://blog.youkuaiyun.com/u010670151/article/details/51262430

这篇博客详细介绍了如何利用HTML5实现自定义的分页加载功能，包括展示Html代码段、Css样式和JavaScript实现的逻辑，最终通过示例截图展示了实际运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果截图：