1.添加分頁(yè)導(dǎo)航css樣式

/* kkPages */.Pagination{float: right;height: 55px;_height: 45px; line-height: 20px;margin-right: 15px;_margin-right: 5px; color: #565656;margin-top: 10px;_margin-top: 20px; clear:both;}.Pagination span{margin-right: 5px;display: block;float: left;margin-left: 5px;}.Pagination span b{padding: 0 2px;}.Pagination div {float:left}.Pagination a{ font-size: 12px;text-decoration: none;display: block;float: left;color: #565656;border: 1px solid #cacaca;height: 20px;line-height: 20px;padding: 0 10px;margin: 0 2px;}.Pagination .Ellipsis {line-height: 32px;overflow: hidden; display:none;}cite.FormNum{display: block;float: left;line-height: 20px;height: 20px; font-style: normal; padding-left:10px;}#PageNum{ color:#777;width: 30px;height: 20px;line-height: 20px; border: 1px solid #cacaca; margin:0 5px; text-align:center;}.Pagination a:hover,.Pagination a.PageCur{background-color: #ee6600;border: 1px solid #d64c01;color: #ffffff; }

2、引入本插件（引入前添加jQuery引入）

<script src="jquery.kkPages.js"></script>

$('.newslist').kkPages({  //那個(gè)元素里   PagesClass:'li', //需要分頁(yè)的元素   PagesMth:5, //每頁(yè)顯示個(gè)數(shù)    PagesNavMth:5 //顯示導(dǎo)航個(gè)數(shù)});

jquery.kkPages.js源碼

(function($){ 	$.fn.kkPages = function(options){				var opts = $.extend({},$.fn.kkPages.defaults, options);				return this.each(function(){		  						var $this = $(this);			var $PagesClass = opts.PagesClass; // 分頁(yè)元素			var $AllMth = $this.find($PagesClass).length;  //總個(gè)數(shù)			var $Mth = opts.PagesMth; //每頁(yè)顯示個(gè)數(shù)			var $NavMth = opts.PagesNavMth; // 導(dǎo)航顯示個(gè)數(shù)									// 定義分頁(yè)導(dǎo)航			var PagesNavHtml = "<div class=/"Pagination/"><a href=/"javascript:;/" class=/"homePage/">首頁(yè)</a><a href=/"javascript:;/" class=/"PagePrev/">上一頁(yè)</a><span class=/"Ellipsis/"><b>...</b></span><div class=/"pagesnum/"></div><span class=/"Ellipsis/"><b>...</b></span><a href=/"javascript:;/" class=/"PageNext/">下一頁(yè)</a><a href=/"javascript:;/" class=/"lastPage/">尾頁(yè)</a><cite class=/"FormNum/">直接到第<input type=/"text/" name=/"PageNum/" id=/"PageNum/">頁(yè)</cite><a href=/"javascript:;/" class=/"PageNumOK/">確定</a></div>"; 			/*默認(rèn)初始化顯示*/						if($AllMth > $Mth){										//判斷顯示					var relMth = $Mth - 1;					$this.find($PagesClass).filter(":gt("+relMth+")").hide(); 					// 計(jì)算數(shù)量,頁(yè)數(shù)					var PagesMth = Math.ceil($AllMth / $Mth); // 計(jì)算頁(yè)數(shù)					var PagesMthTxt = "<span>共<b>"+$AllMth+"</b>條，共<b>"+PagesMth+"</b>頁(yè)</span>";					$this.append(PagesNavHtml).find(".Pagination").append(PagesMthTxt);															// 計(jì)算分頁(yè)導(dǎo)航顯示數(shù)量												var PagesNavNum = "";						for(var i=1;i<=PagesMth;i++){														PagesNavNum = PagesNavNum + "<a href=/"javascript:;/">"+i+"</a>";												};												$this.find(".pagesnum").append(PagesNavNum).find("a:first").addClass("PageCur"); 										//判斷是否顯示省略號(hào)					if($NavMth < PagesMth){														$this.find("span.Ellipsis:last").show();							var relNavMth = $NavMth - 1;							$this.find(".pagesnum a").filter(":gt("+relNavMth+")").hide();													}else{															$this.find("span.Ellipsis:last").hide();							};														/*默認(rèn)顯示已完成,下面是控制區(qū)域代碼*/												//跳轉(zhuǎn)頁(yè)面				var $input = $this.find(".Pagination #PageNum");				var $submit = $this.find(".Pagination .PageNumOK");								//跳轉(zhuǎn)頁(yè)面文本框				$input.keyup(function(){											var pattern_d = /^/d+$/; //全數(shù)字正則												if(!pattern_d.exec($input.val())) {                     		 								alert("友情提示：/n/n請(qǐng)?zhí)顚?xiě)正確的數(shù)字！");							$input.focus().val("");							return false							                		};											});								//跳轉(zhuǎn)頁(yè)面確定按鈕				$submit.click(function(){											if($input.val() == ""){														alert("友情提示：/n/n請(qǐng)?zhí)顚?xiě)您要跳轉(zhuǎn)到第幾頁(yè)！");							$input.focus().val("");							return false														}if($input.val() > PagesMth){																alert("友情提示：/n/n您跳轉(zhuǎn)的頁(yè)面不存在！");								$input.focus().val("");								return false																}else{															showPages($input.val());														};										});													//導(dǎo)航控制分頁(yè)				var $PagesNav = $this.find(".pagesnum a"); //導(dǎo)航指向				var $PagesFrist = $this.find(".homePage"); //首頁(yè)				var $PagesLast = $this.find(".lastPage"); //尾頁(yè)				var $PagesPrev = $this.find(".PagePrev"); //上一頁(yè)				var $PagesNext = $this.find(".PageNext"); //下一頁(yè)								//導(dǎo)航指向				$PagesNav.click(function(){											var NavTxt = $(this).text();						showPages(NavTxt);										});									//首頁(yè)				$PagesFrist.click(function(){											showPages(1);										});									//尾頁(yè)				$PagesLast.click(function(){											showPages(PagesMth);										});									//上一頁(yè)				$PagesPrev.click(function(){												var OldNav = $this.find(".pagesnum a[class=PageCur]"); 						if(OldNav.text() == 1){alert("友情提示：/n/n不要再點(diǎn)啦~已經(jīng)是首頁(yè)啦！");}else{																		var NavTxt = parseInt(OldNav.text()) - 1;									showPages(NavTxt);																};										});									//下一頁(yè)				$PagesNext.click(function(){												var OldNav = $this.find(".pagesnum a[class=PageCur]");							if(OldNav.text() == PagesMth){alert("友情提示：/n/n不要再點(diǎn)啦~已經(jīng)是最后一頁(yè)啦！");}else{																		var NavTxt = parseInt(OldNav.text()) + 1;									showPages(NavTxt);																};										});						// 主體顯示隱藏分頁(yè)函數(shù)			function showPages(page){ 					$PagesNav.each(function(){												var NavText = $(this).text();												if(NavText == page){												$(this).addClass("PageCur").siblings().removeClass("PageCur");															};					});								//顯示導(dǎo)航樣式				var AllMth = PagesMth / $NavMth;				for(var i=1;i<=AllMth;i++){											if(page > (i*$NavMth)){															$PagesNav.filter(":gt("+(i*$NavMth-1)+")").show();								$PagesNav.filter(":gt("+(i*$NavMth-1+$NavMth)+")").hide();								$PagesNav.filter(":lt("+(i*$NavMth)+")").hide();																$this.find("span.Ellipsis:first").show();																					};												if(page <= $NavMth){															$PagesNav.filter(":gt("+($NavMth-1)+")").hide();								$PagesNav.filter(":lt("+$NavMth+")").show();																$this.find("span.Ellipsis:first").hide();																						}; 					};															// 顯示內(nèi)容區(qū)域					var LeftPage = $Mth * (page-1);					var NowPage = $Mth * page;									$this.find($PagesClass).hide();					$this.find($PagesClass).filter(":lt("+(NowPage)+")").show();					$this.find($PagesClass).filter(":lt("+(LeftPage)+")").hide();									};											}; //判斷結(jié)束									}); //主體代碼	};		// 默認(rèn)參數(shù)	$.fn.kkPages.defaults = {				PagesClass:'.item', //需要分頁(yè)的元素		PagesMth:4, //每頁(yè)顯示個(gè)數(shù)				PagesNavMth:5 //顯示導(dǎo)航個(gè)數(shù)	};		$.fn.kkPages.setDefaults = function(settings) {		$.extend( $.fn.kkPages.defaults, settings );	};	})(jQuery);

DEMO下載：鏈接：https://pan.baidu.com/s/1nZGuJSGr1zxEAgZMsFGw8Q  提取碼：1ar4