jquery实现的伪分页效果代码

本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：

这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期待大家关注。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titlejquery伪分页效果/title脚本src=' http : js/jquery-1。7 .2 .量滴js ' type=' text/JavaScript '/script script type=' text/JavaScript ' $(文档)。就绪(功能(){ $(' ul Li : gt(3)').hide()；//初始化，前面四条数据显示，其他的数据隐藏var total_q=$('ul li ').索引()1;//总数据var current _ page=4；//每页显示的数据var current _ num=1；//当前页数var total _ page=数学。round(total _ q/current _ page)；//总页数var next=$(' .下一个');//下一页var prev=$(' .prev’)；//上一页$('.总计')。文本(total _ page)；//显示总页数$('.当前页面').文本(current _ num)；//当前的页数//下一页$('.下一个')。单击(function(){ if(current _ num==7){ return false；//如果大于总页数就禁用下一页} else{ $(' .当前页面').文本(current _ num)；//点击下一页的时候当前页数的值就加1 $.每个($('ul li ')，函数（索引、项目){ var start=current _ page *(current _ num-1)；//起始范围var end=current _ page * current _ num；//结束范围if(索引=开始索引结束){//如果索引值是在开始和目标之间的元素就显示，否则就隐$(这个)。show()；}else { $(this).hide()；} });} });//上一页方法$('.prev ').单击(function(){ if(current _ num==1){ return false；}else{ $(' .当前页面').text(-current _ num)；$.每个($('ul li ')，函数（索引、项目){ var start=current _ page *(current _ num-1)；//起始范围var end=current _ page * current _ num；//结束范围if(索引=开始索引结束){//如果索引值是开始和目标之间的元素就显示，否则就隐藏$(这个)。show()；}else { $(this).hide()；} });} })})/脚本样式类型=' text/CSS ' .main { width :800 pxzoom :1 margin 33600 auto }。项目{宽度：800像素飞越：隐藏；} ul { padding:0宽度宽度：860pxzoom:1}。清除{ zoom:1} .clear:after。在{内容： }之后；显示：块；高度：0;clear:both可见性：隐藏；} ul Li { list-style-type : none；float:left背景# F69 font-size :60 px；文本-阴影：1 px 1px 3px # 555宽度宽度：380像素高度：200 px边距336010 px 40px 10px 0；行高：200 px文本对齐：居中；color: # fff}。page _ BTN { padding-top :20 px；} .page _ BTN a { cursor : pointer padding :5 pxborder : solid 1px # CCC font-size :12 px；} .page _ box { float:right}。num { padding :0 10px }/style/head body div class=' main ' div class=' item ' ul class=' clear ' li1/Li Li 2/Li Li/Li Li 4/Li Li 5/Li Li 6/Li Li 7/Li Li 8/Li Li 9/Li Li Li 10/Li Li 11/Li Li Li 12/李丽丽13/Li Li Li 14/李丽丽15/李丽丽16/李丽丽Li 17/李丽丽Li 18/李丽丽Li 19/Li li20/Li li21/li21上一页/aspan class=' num ' span class=' current _ page ' 1/span span style=' padd :0 3px；//span span class=' total '/span/span a class=' next '下一页/a /span /div /div！-主/正文/html希望本文所述对大家jQuery程序设计有所帮助。