用jQuery写的一个翻页，并封装为插件，
1 *{ 2 ????margin:0; 3 ????padding: 0; 4 ????list-style: none; 5 ????text-decoration: none; 6 } 7 .page{ 8 ????width:500px; 9 ????margin:100px auto;10 ????color: #ccc;11 }12 .page a{13 ????display: inline-block;14 ????color: #428bca;15 ????height: 25px;16 ????line-height: 25px;17 ????padding: 0 10px;18 ????border: 1px solid #ddd;19 ????margin: 0 2px;20 ????border-radius: 4px;21 ????vertical-align: middle;22 }23 .page a:hover{24 ????border: 1px solid #428bca;25 }26 .page .current{27 ????display: inline-block;28 ????height: 25px;29 ????line-height: 25px;30 ????padding: 0 10px;31 ????margin: 0 2px;32 ????color: #fff;33 ????background-color: #428bca;34 ????border: 1px solid #428bca;35 ????border-radius: 4px;36 ????vertical-align: middle;37 }38 .page .disabled{39 ????display: inline-block;40 ????height: 25px;41 ????line-height: 25px;42 ????padding: 0 10px;43 ????margin: 0 2px;44 ????color: #bfbfbf;45 ????background: #f2f2f2;46 ????border: 1px solid #bfbfbf;47 ????border-radius: 4px;48 ????vertical-align: middle;49 }css自己随便写一下就行，
1 (function($){ 2 ????function init(dom, args){ 3 ????????if (args.pageCount >= args.current){ 4 ????????????createPage(dom, args); 5 ????????????bindEvent(dom, args); 6 ????????}else{ 7 ????????????alert("输入页码大于页数！") 8 ????????} 9 ????}10 ????function createPage(dom,args){ ???????11 ????????dom.empty();12 ????????if(args.current != 1){13 ????????????dom.append(‘<a href = "#" class="prevPage">上一页</a>‘);14 ????????}else{15 ????????????dom.append(‘<span class="disabled">上一页</span>‘);16 ????????}17 18 ????????if (args.current >= 4){19 ????????????dom.append(‘<a href = "#" class="tcdNumber">‘ + 1 + ‘</a>‘);20 ????????}21 ????????if (args.current >= 5){22 ????????????dom.append(‘<span>...</span>‘);23 ????????}24 ????????for (var i = args.current-2; i < args.current + 3; i ++){25 ????????????if (i > 0 && i <= args.pageCount){26 ????????????????if(i == args.current){27 ????????????????????dom.append(‘<span class="current">‘ + args.current + ‘</span>‘);28 ????????????????}else{29 ????????????????????dom.append(‘<a href = "#" class="tcdNumber">‘+ i +‘</a>‘);30 ????????????????}31 ????????????}32 ????????}33 ????????if (args.current <= args.pageCount - 5){34 ????????????dom.append(‘<span>...</span>‘);35 ????????}36 ????????if (args.current <= args.pageCount - 4){37 ????????????dom.append(‘<a href = "#" class="tcdNumber">‘ + args.pageCount + ‘</a>‘);38 ????????}39 ????????if(args.current != args.pageCount){40 ????????????dom.append(‘<a href = "#" class="nextPage">下一页</a>‘);41 ????????}else{42 ????????????dom.append(‘<span class="disabled">下一页</span>‘);43 ????????}44 ????}45 ????function bindEvent(dom,args){46 ????????dom.on(‘click‘,‘.prevPage‘,function(){47 ????????????args.current--;48 ????????????createPage(dom,args);49 ????????????args.backFunction(args)50 ????????})51 ????????dom.on(‘click‘,‘.tcdNumber‘,function(){52 ????????????args.current = parseInt($(this).text());53 ????????????createPage(dom,args);54 ????????????args.backFunction(args)55 ????????})56 ????????dom.on(‘click‘,‘.nextPage‘,function(){57 ????????????args.current++;58 ????????????createPage(dom,args);59 ????????????args.backFunction(args)60 ????????})61 ????}62 ????$.fn.createPage = function(options){63 ????????var args = $.extend({64 ????????????pageCount : 1,65 ????????????current : 1,66 ????????????backFunction : function(){}67 ????????},options);68 ????????init(this,args);69 ????}70 }(jQuery)) ? 1 ?<div class="page"></div> 2 ????<script> 3 ????????$(".page").createPage({ 4 ????????????pageCount : 15, 5 ????????????current : 5, 6 ????????????backFunction : function(arr){ 7 ????????????????console.log(arr.current) 8 ????????????} 9 ????????})10 ????</script>用jQuery写的一个翻页，并封装为插件，
原文地址：https://www.cnblogs.com/bacydm/p/9783126.html