最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在铬测试过，其他的兼容性不知道怎么没时间测试呢。欢迎有同样需求的小伙伴采用，在使用过程发现有问题欢迎提出批评建议。

css:

@ charset ' utf-'；* { margin:pxpadding:px字体系列： '微软雅黑；font-size : px}._ ul { float : leftheight : px显示：块；}._ ul Li {列表样式-类型：无；高度：像素宽度： px边界：px实心# eeecursor:pointer指针指针；文本对齐：居中；线高： px颜色：蓝色；float:leftmargin: px}。_ul li:hover ._before:hover，_在：悬停后{边框： px实心# f；背景# ffff}。li-hover {border:px实心# f；背景# ffff}。_在{ width : pxheart : pxborder : px实心# eeefloat:leftcursor:pointer指针指针；文本对齐：居中；线高： px颜色：蓝色；margin: px}。_在{ width : pxheart : pxborder : px实心# eeefloat:leftcursor:pointer指针指针；文本对齐：居中；线高： px颜色：蓝色；margin: px}。隐藏{ display:none}。_选择{border:px固体#fff！重要；颜色：黑色！重要；}._左{ float:left边距-左侧：像素；}._右{浮动：右右边距： px}js:

；（函数($,窗口，文档，未定义){var isShow=function (ele，options) {this .$ ele=ele，this.defaults={maxpage:count:total:float: 'right '，margin:'px '，getData:null}，this.options=$ .extend({}，this.defaults，options)} is show。prototype={ showdiv : function(){ this。bindEvent()；}，ShowHTML : FuncTion(){ var _ this=this，strHtml=' '，count=Math。天花板(这个。选项。total/_ this。选项。计数)；strHtml=' div class='(_ this。选项。float==' right '？_ right ' : ' _ left ')' div class=' _ behind '上一页/div ul class=' _ ul '；对于(var I=；i=计数；i ) {strHtml='li数据-索引=' '(我==？"第一个：i==计数？"最后一个' : '中间)' class='' (i==？_选择' : ' ')' '(I _ this。选项。麦克斯.佩奇。隐藏： ' ')' '“我”/李；}strHtml='/uldiv class='_after '下一页/div/div '；_这个$元素。追加(STRHtml)；}，moveindex :函数(index){ var _ this=this，_index=this.options.maxpage，count=math。天花板(这个。选项。total/_ this。选项。计数)；var middle=_ index/；var curr=_this .$元素。find(' Li ')；if (count=_index) {$(curr).show()；} else {var ftemp=，LTE MP=；if(中间指数)fte MP=(中间指数)；如果(中间计数-索引)ltemp=(中间-(计数-索引));$(货币).每个（函数(){var currindex=parseInt($(this)).text())；if(currindex index-middle-LTE MP currindex=parsent(index)parsent(middle)fte MP){ $(this).show()；} else {$(this).hide()；}});} },其中Find:function(status，_ index){ var _ this=this；开关（状态){ case ' frist ' : _ this .$element.find(' ._before ').hide()；_这个$element.find(' ._在)之后show()；打破；案例上一次' : _今年.$element.find(' ._在)之后hide()；_这个$element.find(' ._before ').show()；打破；案例'中间': _这个$element.find('div ').show()；打破；} _这个MoveIndex(_ index)；_这个。选项。GetDATa({ index : _ index })；}，BindEvent : FuncTion(){ var _ this=this；_这个。显示html()；_这个$element.find('li ').点击(function () {var status=$(this)).数据(' index ')，_index=$(this).text()；$(这个)。addClass('_select ').兄弟姐妹()。移除CLaSS(' _ select ')；_这个哪个查找(状态，_ index)；});_这个$element.find(' ._before ').单击(function () {var status=$(')._选择')。prev().数据(' index ')，_index=$(' ._选择')。prev().text()；$('._选择')。prev().addClass('_select ').兄弟姐妹()。移除CLaSS(' _ select ')；_这个哪个查找(状态，_ index)；});_这个$element.find(' ._在)之后。单击(function () {var status=$(')._选择')。下一个()。数据(' index ')，_index=$(' ._选择')。下一个()。text()；$('._选择')。下一个()。addClass('_select ').兄弟姐妹()。移除CLaSS(' _ select ')；_这个哪个查找(状态，_ index)；});} } $ .fn。fy=function(option){ var fs=new isShow(this，option)；返回fs。ShowDiv()；}})(jQuery，窗口，文档);以上内容是小编给大家分享的自己动手写的jquery分页控件（非常简单实用),希望对大家有所帮助。