有关图片分页查看的实例详解
程序员文章站
2022-04-22 21:31:58
...
<table height="120" border="0" align="center" cellpadding="5" cellspacing="0"> <script language="javascript" type="text/javascript"> function int(I,k) { //define variable var ff=0; var j; j=Math.round(I/k)-I/k; if (j!=0){ ff=Math.round(I/k)+1;} else { ff=Math.round(I/k); } return ff; } function querystring(qs){ s=location.href; s=s.replace("?","?&").split("&"); re=""; for(i=1;i<s.length;i++){ if(s[i].indexOf(qs+"=")==0){ re=s[i].replace(qs+"=",""); } } return re; } var page=querystring("page") if(page==false){ page=1 } var maxperpage=4 //每页显示条数,这里每页显示4张 var totalimg=8 //一共有多少张图片这里共8张 var filename="list.htm" //这个文件的名称 var pagecounts var cnum,snum,onum,endnum,kstr var startnum=((page-1)*maxperpage); endnum=startnum+maxperpage; var x=0; pagecounts=int(totalimg,maxperpage) if(page==pagecounts){ endnum=((pagecounts-1)*maxperpage)+totalimg-(pagecounts-1)*maxperpage } for(k=startnum+1;k<=endnum;k++){ kstr=k.toString(); if(k<10){ kstr="00"+kstr } else { kstr="0"+kstr } x+=1; //显示数据 if(x%2==0){ document.write("<td><img src=img/LX-"+kstr+".jpg width=230 height=290 onclick=javascrpt:window.open(this.src) style='cursor:hand'></td></tr>"); }else{ document.write("<tr><td><img src=img/LX-"+kstr+".jpg width=230 height=290 onclick=javascrpt:window.open(this.src) style='cursor:hand'></td>"); } } </script> </table><table width="100%" height="23" border="0" cellpadding="0" cellspacing="0"> <tr> <td><label> <p align=center><span id="dinfo"></span><select name="select" onChange="location.href=this.options[this.selectedIndex].value"> <script type="text/javascript" language="javascript"> document.getElementById("dinfo").innerHTML="共有<font color=red>"+totalimg.toString()+"</font>条记录 共<font color=red>"+pagecounts+"</font>页 每页<font color=red>"+maxperpage+"</font>条 "; for(y=1;y<=pagecounts;y++){ if(page==y){ document.write("<option value="+filename+"?page="+y+" selected>"+y+"</option>"); }else{ document.write("<option value="+filename+"?page="+y+">"+y+"</option>"); } } </script> </select></p> </label></td> </tr> </table>
以上就是有关图片分页查看的实例详解的详细内容,更多请关注其它相关文章!