<!DOCTYPE html>
<html>
<head>
<title>分页</title>
<meta name="name" content="content" charset="utf-8">
<style type="text/css" media="screen">
ul,li{
margin:0;
padding: 0;
list-style: none;
}
ul:after{
content:"";
display: block;
clear: both;
}
li{
float: left;
margin-right: 5px;
}
li{
padding:5px 8px;
border:1px solid #999;
}
a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 100%;
}
.current{
background-color: #3186e6;
}
.current a{
color: #fff;
}
</style>
</head>
<body>
<script src="jquery-1.12.4.min.js"></script>
<button id="pre">上一页</button>
<button id="next">下一页</button>
<br><br/>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li class="current"><a href="javascript:;">5</a></li>
</ul>
<script>
var windowPage = 2;
var totalpage = 11;
pagination(totalpage,3);
function pagination(totalpage,page){
var html = "";
if(totalpage<=5){
for(var i=1;i<=totalpage;i++){
html += `<li><a href="javascript:;">`+i+`</a></li>`;
}
}else{
if(page<=3){
for(var i=1;i<=5;i++){
html += `<li><a href="javascript:;">`+i+`</a></li>`;
}
}else{
if((parseInt(page)+2)<=totalpage){
for(var i=page-2;i<=page+2;i++){
html += `<li><a href="javascript:;">`+i+`</a></li>`;
}
}else{
for(var i=totalpage-4;i<=totalpage;i++){
html += `<li><a href="javascript:;">`+i+`</a></li>`;
}
}
}
}
$('ul').html(html);
$('ul li').on('click','a',function(){
windowPage = parseInt($(this).text());
pagination(totalpage,windowPage);
});
}
$('#pre').click(function(){
windowPage--;
if(windowPage<1){
windowPage = 1;
}
pagination(totalpage,windowPage);
});
$('#next').click(function(){
windowPage++;
if(windowPage>totalpage){
windowPage = totalpage;
}
pagination(totalpage,windowPage);
})
</script>
</body>
</html>
