用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>