首页 > 网络编程 > JavaScript > javascript技巧 > js 分页代码 js 分页代码带切换效果 2009-06-01 01:44:43 作者： js 分页效果实现代码，可以切换页面 载入需要点时间，请稍微等待。 <!-- /* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */ /** * 用js分页显示ul/ol的列表 * * 这里的演示设置了自动滚动 * * PHP versions 4 and 5 * * LICENSE: This source file is subject to version 3.0 of the PHP license * that is available through the world-wide-web at the following URI: * http://www.php.net/license/3_0.txt. If you did not receive a copy of * the PHP License and are unable to obtain it through the web, please * send a note to license@php.net so we can mail you a copy immediately. * * @package GCCMS * @author Yi Bo <etng2004@gmail.com> * @copyright 2000-2005 GCSOFT.COM & ETNG.NET * @license http://www.php.net/license/3_0.txt PHP License 3.0 * @version SVN: $Id: page.html 21 2006-01-22 09:35:58Z etng $ * @link $HeadURL: svn://dev.gccms.net/trunk/page.html $ * @see * @since */ --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- /*这里填写自己需要的css定义*/ body { width: 760px; padding: 0 0 0 0; margin: 0 auto 0 auto; font-size: 12px; font-family: "Arial", "Helvetica", "sans-serif"; } td { font-size: 12px; } ul,li,form,div,span { padding: 0 0 0 0; margin: 0 0 0 0; } .ctrlPages {COLOR: #f60;cursor:hand;} .curPage {COLOR: #f00;cursor:hand;} --> </style> <script language="JavaScript"> <!-- var ETNGpager = function( srcName, dstName, cntPP, cntPS ) { this.srcName= srcName; this.dstName= dstName; this.curP= 1;//默认当前页为第一页 this.cntPP= cntPP || 2;//默认每页两条纪录 this.cntPS= cntPS || 3;//默认每页显示5个分页上下文 this.items= []; this.showPNP= true;/*显示上下页链接*/ this.showType= true;/*滑动分页*/ this.result= {pagedata:[],pagebar:'',limit:[0,0],report:''}; this.parse();/*总纪录数*/ } ETNGpager.prototype.page = function (){ this.cntP= Math.ceil(this.cntR/this.cntPP);/*总页数*/ this.cntS= Math.ceil(this.cntP/this.cntPS);/*总段数*/ this.curS= Math.ceil(this.curP/this.cntPS);/*当前段*/ this.preP= this.curP -1;/*上一页*/ this.nextP= this.curP +1;/*下一页*/ this.preS= this.curS -1;/*上一段*/ this.nextS= this.curS +1;/*下一段*/ this.startR= (this.curP -1)*this.cntPP + 1;/*起始纪录*/ this.endR= (this.curP*this.cntPP >this.cntR)?this.cntR:this.curP*this.cntPP;/*结束纪录*/ this.result['pagedata']=[]; if(this.showType){ this.perSide= Math.floor(this.cntPS/2); this.startP= (this.curP > this.perSide)?(this.curP - this.perSide):1; this.endP= (this.startP + this.cntPS)>this.cntP?this.cntP:(this.startP + this.cntPS); }else{ this.startP= (this.curS-1)*this.cntPS+1; this.endP= (this.curS*this.cntPS>this.cntP)?this.cntP:(this.curS*this.cntPS); } for(var i = this.startP;i<=this.endP;i++){ this.result['pagedata'].push((i==this.curP)?'<span class="curPage">'+i+'</span>':'<span onclick="page('+i+')">'+i+'</span>'); } if(this.showPNP){ if(this.curP>1)this.result['pagedata'].unshift('<span onclick="page('+(this.curP-1)+')">上一页</span>'); if(this.curP<this.cntP)this.result['pagedata'].push('<span onclick="page('+(this.curP+1)+')">下一页</span>'); } this.result['pagebar']= this.result['pagedata'].join(' '); this.result['limit']= [this.startR,this.endR]; this.result['report']= '共'+this.cntR+'条,当前页'+this.startR+'-'+this.endR+','+this.curP+'/'+this.cntP+'页'; } ETNGpager.prototype.parse = function (){ var obj = document.getElementById(this.srcName); for(var i = 0;i<obj.childNodes.length;i++){ if(obj.childNodes[i].nodeType!=3)this.items[this.items.length]=obj.childNodes[i].innerHTML; } this.cntR = this.items.length; return this.items.length; } ETNGpager.prototype.create=function(){ this.page(); document.getElementById(this.dstName).innerHTML='<li>'+this.items.slice(this.startR-1,this.endR).join('</li><li>')+'</li>'; document.getElementById(this.dstName).innerHTML+='<span class="ctrlPages">'+this.result['pagebar']+this.result['report']+'</span>'; } //--> </script> </head> <body> <ul id="listcontent" style="display:none;"> <li><a href=http://tech.sina.com.cn/i/2005-12-08/1204786367.shtml target='_blank'>支付宝与六大代理签订协议 </a></li> <li><a href=http://forum.taobao.com/showThread.htm?thread=3123988&forum=14 target='_blank'>刷卡积分可网上购物 </a></li> <li><a href=/alipay/news/sample/23492.htm target='_blank'>支付宝为网店保驾护航 </a></li> <li><a href=http://it.people.com.cn/GB/8219/50656/52310/3822563.html target='_blank'>支付宝红包送来红地毯 </a></li> <li><a href=/alipay/news/sample/22701.htm target='_blank'>紧急天气预报"红色风暴"空降支付宝 </a></li> <li><a href=/alipay/news/sample/22699.htm target='_blank'>小红包背后大名堂 </a></li> <li><a href=http://www.q88.net/SHOP_2005A/zfb.aspx target='_blank'>Q88.net全面无缝接合支付宝 </a></li> <li><a href=/alipay/news/sample/21529.htm target='_blank'>电子支付规范走出第一步 使用专业版受鼓励 </a></li> <li><a href=/alipay/news/sample/19786.htm target='_blank'>从支付宝看电子商务的发展 </a></li> <li><a href=/alipay/news/sample/19784.htm target='_blank'>谁能与支付宝PK？ </a></li> <li><a href=/alipay/news/sample/19618.htm target='_blank'>国内第一家引入支付宝的网络图库正式开通 </a></li> <li><a href=/alipay/news/sample/19475.htm target='_blank'>新浪网：中关村在线加入支付宝联盟 </a></li> <li><a href=/alipay/news/sample/19471.htm target='_blank'>千家网店加入支付宝联盟 </a></li> <li><a href=/alipay/news/sample/18549.htm target='_blank'>我与支付宝的分分秒秒 </a></li> <li><a href=/alipay/news/sample/18207.htm target='_blank'>支付宝—放心“网宝”的理由 </a></li> <li><a href=/alipay/news/sample/17944.htm target='_blank'>欧飞数卡携手支付宝,再创新高 </a></li> <li><a href=/alipay/news/sample/17803.htm target='_blank'>莎莎香水网:支付宝助我完成销售计划 </a></li> <li><a href=/alipay/news/sample/17801.htm target='_blank'>使用支付宝:一个月交易额翻5倍 </a></li> <li><a href=/alipay/news/sample/17799.htm target='_blank'>支付宝：一个普通站长的自述 </a></li> <li><a href=/alipay/news/sample/17797.htm target='_blank'>新开网店如何日交易额达8000元？ </a></li> <li><a href=/alipay/news/sample/17563.htm target='_blank'>名大数码：网店月交易额如何突破30万 </a></li> <li><a href=http://it.sohu.com/20050916/n240400443.shtml target='_blank'>中国卡网结盟支付宝创交易量周增长新高 </a></li> <li><a href=http://it.people.com.cn/GB/42891/42894/3676101.html target='_blank'>支付宝联盟与合作伙伴合作在人民网推广 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---103546-.htm target='_blank'>网络银行使用全攻略---足不出户查看汇款明细 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1561087-.htm target='_blank'>"支付宝购物体验"征文-----贿赂 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---2102458-.htm target='_blank'>卖家谈：谁是支付宝最终的获利者？ </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1617047-.htm target='_blank'>淘宝两钻卖家感悟支付宝 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1686484-.htm target='_blank'>支付宝“即时到帐交易”的使用经验及建议 </a></li> <li><a href=http://forum.taobao.com/show_thread-50---1794216-.htm target='_blank'>我的第一笔网上交易 </a></li> </ul> <ul id="listcontent2">列表信息加载中，请您稍等……</ul> <script language="JavaScript"> <!-- var pager = new ETNGpager('listcontent','listcontent2',10,5); var curP = 1; showtime = setInterval("page()", 5000); function page(i){ curP =(curP>pager.cntP)?1:curP; if(i){ curP = n =i; }else{ n = curP++; } pager.curP = (n>pager.cntP)?pager.cntP:n; pager.create(); } //--> </script> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:JQuery与JSon实现的无刷新分页代码基于jQuery的js分页代码jsp hibernate的分页代码一个实用的JSP分页代码纯js分页代码(简洁实用)
