html5分页代码，简单的分页代码js实现先看看效果图：
简单的分页js代码:
1、效果描述：不⽤分页即可显⽰的jQuery插件
jQuery分页插件——jQuery.page.js⽤法很简单，效果很棒
2、调⽤⽅法：
$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调⽅法，p是当前页码
}
});
pageCount：总页数
current：当前页
3、js封装代码
//分页插件
/**
ch
**/
(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return (function(){
/
/上⼀页
if(args.current > 1){
obj.append('');
}else{
obj.append('上⼀页');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('...');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('');
}else{
obj.append(''+ start +'');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('...');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append('');
}
//下⼀页
if(args.current < args.pageCount){
obj.append('');
}else{
obj.append('下⼀页');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
<("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上⼀页
<("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下⼀页
<("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 10,
current : 1,
backFn : function(){}
},options);
ms.init(this,args);
}
})(jQuery);
4、使⽤demo:
⼀个⾮常简单的jQuery分页插件
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
.
tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0
10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;}
调⽤⽅法：
$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调⽅法，p是当前页码
}
});
pageCount：总页数
js制作简单的焦点图效果
current：当前页
$(".tcdPageCode").createPage({
pageCount:6,
current:1,
backFn:function(p){
console.log(p);
}
});
以上就是本⽂的全部内容，希望对⼤家学习Javascript有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。