jquery实现伪分页效果图:![在这里插入图片描述](https://s33.aconvert.com/convert/p3r68-cdx67/x3mtq-dnu06.gif)
~ ~ ~ 全部代码及注释如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.virtul_page{
width: 1000px;
margin: 0 auto;
position: relative;
}
li {
float: left;
width: 460px;
height: 280px;
margin: 20px;
background: pink;
line-height: 280px;
text-align: center;
font-size: 70px;
color: #fff;
}
.btn_box {
position: absolute;
top:640px;
right: 50px;
}
.btn_box a {
border: 1px solid #ccc;
cursor: pointer;
font-size: 14px;
margin: 5px;
padding: 5px;
border-radius: 3px;
}
.page_box{
font-size: 14px;
}
</style>
</head>
<body>
<div class="virtul_page">
<ul class="ul_box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
</ul>
<span class="btn_box">
<a class="prev">上一页</a>
<span class="page_box">
<span class="current_page">1</span>
<span>/</span>
<span class="total_page"></span>
</span>
<a class="next">下一页</a>
</span>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(".ul_box li:gt(3)").hide();
var li_length = $(".ul_box li").length;
var current_page = 1;
var total_page = Math.ceil(li_length/4);
$(".total_page").text(total_page);
$(".next").click(function(){
if(current_page == total_page){
return false;
}else{
$(".current_page").text(++current_page);
$(".ul_box li").each(function(index,item){
var start = (current_page-1) * 4;
var end = (current_page * 4) - 1;
if(index >= start && index <= end){
$(this).show();
}else{
$(this).hide();
}
})
}
})
$(".prev").click(function(){
if(current_page == 1){
return false;
}else{
$(".current_page").text(--current_page);
$(".ul_box li").each(function(index,item){
var start = (current_page-1) * 4;
var end = ((current_page) * 4) - 1;
if(index >= start && index <= end){
$(this).show();
}else{
$(this).hide();
}
})
}
})
</script>
</body>
</html>