思路：
需要通过判断点击页码的情况，来分别进行html结构替换
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0em; padding: 0; text-decoration: none; } .page{ width: 500px; height: 100px; margin:10px auto; } .page a{ display: inline-block; color: blue; height: 25px; line-height: 25px; padding: 0 10px; border: 1px solid #dddddd; margin: 0 2px; border-radius: 4px; } .disable{ display: inline-block; color: blue; height: 25px; line-height: 25px; padding: 0 10px; border: 1px solid #dddddd; margin: 0 2px; border-radius: 4px; color: black; } </style> </head> <body> <div class="page"></div> <script src="./src/jquery.min.js"></script> <script> ;(function($){ function init(dom,args){ console.log(dom,args); if(args.current <= args.pageCount){ fillHtml(dom,args); bindEvent(dom,args) }else{ alert('请输入正确的页码') } } function fillHtml(dom,args){ //上一页 if (args.current > 1) { //当前页面是否为上一页 dom.append('<a href="#" class="prevPage">上一页</a>') } else { dom.remove('.prevPage'); dom.append('<a class="disable">上一页</a>') } //中间页数 //第一页 if(args.current !== 1 && args.current >= 4 && args.current !== 4 ){ dom.append('<a class="num">1</a>') } //第一页加... if (args.current-2 > 2 && args.current >4) { dom.append('<span>...</span>') } //中间连续页数 var start=args.current -2 ; var end = args.current +2 ; for(;start <= end; start++){ if (start <= args.pageCount && start >=1) { if(start == args.current){ dom.append('<a class="current">'+start+'</a>') }else{ dom.append('<a class="num">'+start+'</a>') } } } //最后一页加... if (args.current+2 < args.pageCount -1 && args.pageCount >4) { dom.append('<span>...</span>') } if(args.current !== args.pageCount && args.current < args.pageCount -2 && args.pageCount !== 4 ){ dom.append('<a class="num">'+args.pageCount+'</a>') } //下一页 if (args.current < args.pageCount) { //当前页面是否为上一页 dom.append('<a href="#" class="nextPage">下一页</a>') } else { dom.remove('.nextPage'); dom.append('<span class="disable">下一页</span>') } } function bindEvent(dom,args){ dom.on('click','.num',function(e){ dom.html('') var cur = parseInt($(this).text()) changePage(dom,args,cur) }) dom.on('click','.prevPage',function(e){ dom.html('') var cur = parseInt(dom.find('.current').text()) changePage(dom,args,cur-1) }) dom.on('click','.nextPage',function(e){ dom.html('') var cur = parseInt(dom.find('.current').text()) changePage(dom,args,cur+1) }) } function changePage(dom,args,page){ fillHtml(dom,{current:page,pageCount:args.pageCount}); args.backFn(page) } $.fn.extend( { createPage:function(options){ var args = $.extend({ pageCount:5, current:1, backFn:function(){} },options); init(this,args) } }) })(jQuery) </script> <script> $('.page').createPage({ pageCount:10, current:5, backFn:function(p){ console.log(p) } }) </script> </body> </html>
...