分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片预览功能</title>
<script src="jquery-2.1.1.js" ></script>
</head>
<style type="text/css">
body,html{
margin: 0;
padding: 0;
}
body{
width: 80%;
margin-left: 5%;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: #000;
}
#inner ul li{
float:left;
}
#inner ul li {
width: 35px;
height: 35px;
line-height: 35px;
background: #fff;
margin-right: 2px;
text-align: center;
cursor: pointer;
border:1px solid #f9f9f9;
}
#inner ul .not{
cursor: default;
}
#inner ul li a{
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
}
#inner ul .pre,#inner ul .next{
width: 70px;
}
#inner ul li:hover{
border:1px solid #FF4400;
color:#FF4400;
}
#inner ul .not:hover{
border:1px solid #f9f9f9;
color:#000;
}
#inner ul .hide{
display: none;
}
#inner ul .current:hover{
border:1px solid #f9f9f9;
color:#fff;
}
#inner ul .current{
background: #FF4400;
cursor: default;
color:#fff;
}
#inner ul .noNext{
cursor:default;
}
#inner ul .noNext:hover{
border:1px solid #f9f9f9;
color:#000;
}
#inner ul .noNext a{
cursor:default;
}
</style>
<body>
<!--头部-->
<div style="margin-left:100px;margin-top:100px;" id="text"></div>
</body>
</html>
<script type="text/javascript">
var fenye ={
//按钮响应时的下一个页面
Current:1,
//li数
LisLen:0,
//页数
acount:0,
init:function(amount,data,id,num,fn){//分别为总数 每页个数 插入到某处的ID 显示第几页 按钮响应函数
num = Number(num);
this.fn = fn;
//创建DOM
this.acount = parseInt((amount%data)==0?(amount/data):(amount/data+1));
this.LisLen = (this.acount > 9) ? 9 :this.acount ;
this.lastPage = (num > this.acount) ? this.acount :((num < 1 )?1:num);
var $div = $("<div id='inner'></div>");
var $ul = $("<ul class='items'></ul>");
$div.append($ul);
var $pre = "<li class='item pre'><a href='#'><span><<上一页</span></a></li>";
var $next = "<li class='item next'><a href='#'><span>下一页>></span></a></li>";
var $text="";
for(var i =0;i<this.LisLen;i++){
$text += "<li class='item page'><a href='#'><span></span></a></li>" ;
}
$ul.append($pre).append($text).append($next);
$id = $("#"+id);
$id.append($div);
this.pageLis = $div.find(".items .page");
this.change(this.lastPage);
this.control();
},
eventDefault:function(event){
event.preventDefault();
return false;
},
//判断是否为首尾页 从而禁止前一页和下一页的点击事件
isLast:function(){
var $current = $(".current a span").html();
//最后一页
if($current == this.acount)
{
$(".items .next").addClass('noNext');
$(".items .next").on('click', 'a', this.eventDefault);
}else{
$(".items .next").removeClass('noNext');
$(".items .next").off('click', 'a', this.eventDefault);
}
//第一页
if($current == 1)
{
$(".items .pre").addClass('noNext');
$(".items .pre").on('click', 'a', this.eventDefault);
}else{
$(".items .pre").removeClass('noNext');
$(".items .pre").off('click', 'a', this.eventDefault);
}
},
//
change:function(pageNum){
pageNum = Number(pageNum);
//渲染到第几个li
var index = 0;
//去除样式
$('#inner .items .current').removeClass('current');
$('#inner .items .not').removeClass('not');
$('#inner .items .hide').removeClass('hide');
//若小于四 则按顺序创建页数1,2,3等
if(pageNum<=4){
//console.log(this.pageLis.eq(this.Current))
for(var i=0;i<pageNum;i++){
if(i+1==pageNum){
this.pageLis.eq(i).addClass('current');
}
this.pageLis.eq(i).find("a span").html(i+1);
index = i+1;
}
//否则 先创建1,2，再创建... 再创建当前页数
}else{
for(var i=0;i<2;i++){
this.pageLis.eq(i).find("a span").html(i+1);
}
this.pageLis.eq(2).addClass('not').find("a span").html("...");
this.pageLis.eq(3).addClass('current').find("a span").html(pageNum);
index = 4;
}
//若+2大于总页数 则按顺序显示至总页数
if(pageNum+2>=this.acount){
for(var i=pageNum,j=0;i<this.acount;i++){
this.pageLis.eq(index++).find("a span").html(pageNum+j+1);
j++;
};
}else{
//否则 先创建后面两页 再创建...
for(var i=0;i<2;i++){
this.pageLis.eq(index++).find("a span").html(pageNum+i+1);
}
if(pageNum+3!==this.acount)
this.pageLis.eq(index++).addClass('not').find("a span").html("...");
//再根据页数创建最后两页或一页
if(this.acount-pageNum>4){
this.pageLis.eq(index++).find("a span").html(this.acount-1);
this.pageLis.eq(index++).find("a span").html(this.acount);
}else{
this.pageLis.eq(index++).find("a span").html(this.acount);
}
}
for(var length =this.pageLis.length;index<length;index++){
this.pageLis.eq(index).addClass('hide');
}
this.isLast();
},
//响应按钮点击事件
control:function(){
var that = this;
$("body").on('click', '#inner .item a', function(event) {
event.preventDefault();
that.Current = 1;
that.lastPage = Number($('#inner .items .current').find('a span').html());
if($(this).parent().hasClass('next')){
that.Current = that.lastPage+1;
}
else if($(this).parent().hasClass('pre')){
that.Current = that.lastPage-1;
}
else
that.Current = $(this).find('span').eq(0).html();
that.fn(that.Current);
that.change(that.Current);
});
}
}
//测试用例
fenye.init(2,2,"text",9,abc);
function abc(x){
console.log(x)
}
;
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-02-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读