图片分页显示

一、javascript函数
 

function pager(pageindex,pagerecs,picw,pich)
 {
   var perpagerec=pagerecs*1;
   var curpage=pageindex*1;
   var firstdex=0;lastdex=0;
   var imgarray=new Array();
   var tablew=0;
   var tdw=picw;   tablew=picw*perpagerec*1;
   var conf_showsmalltitle=document.getElementById("hisshowsmalltitle").value;
   var conf_showbigimgnav=document.getElementById("hisshowbigimgnav").value;
   if (perpagerec>1){tablew=picw*perpagerec*1+45;tdw=picw+15;}
   var row1="",row2="",prepage,nextpage,idlist="";
  var ardex=1,picstr="";
  imgarray[ardex]=new Array("/luckyled/images/Equipment1.jpg",116,'光电测试仪');
 ardex=ardex+1;
  imgarray[ardex]=new Array("/luckyled/images/Equipment2.jpg",117,'光电烤箱');
 ardex=ardex+1;
  imgarray[ardex]=new Array("/luckyled/images/Equipment3.jpg",135,'冲床');
 ardex=ardex+1;
  var totalrecs=imgarray.length-1;
  if (totalrecs % perpagerec==0)
 {
   sumpages=totalrecs/perpagerec;
  }
 else
 {
   sumpages=Math.floor(totalrecs/perpagerec)+1;
 }
 firstdex=perpagerec*(curpage-1)+1;
 if (curpage==sumpages)
 {
   lastdex=curpage*perpagerec-(sumpages*perpagerec*1-totalrecs);
 }
else
{
 lastdex=curpage*perpagerec*1;
}
var imgarray1=new Array();
var dex1=0;
for (var dex=firstdex;dex<=lastdex;dex++)
{
 imgarray1[dex1]=new Array(imgarray[dex][0],imgarray[dex][1],imgarray[dex][2]);
 dex1+=1;
}
if (curpage==1)
{
row1="<img src=/luckyled/images/show_prev1.jpg>";
row2="<a href='#' onclick=pager(2,"+pagerecs+","+picw+","+pich+")><img src=/luckyled/images/show_next2.jpg></a>";
}
if (curpage==sumpages)
{
  prepage=curpage-1;
  row1="<a href='#' onclick=pager("+prepage+","+pagerecs+","+picw+","+pich+")><img src=/luckyled/images/show_prev2.jpg></a>"
  row2="<img src=/luckyled/images/show_next1.jpg>"
}
if (curpage!=1 && curpage!=sumpages)
{
  prepage=curpage-1;
  nextpage=curpage+1;
  row1="<a href='#' onclick=pager("+prepage+","+pagerecs+","+picw+","+pich+")><img src=/luckyled/images/show_prev2.jpg>";
  row2="<a href='#' onclick=pager("+nextpage+","+pagerecs+","+picw+","+pich+")><img src=/luckyled/images/show_next2.jpg></a>";
 }
  var temp_str="";
  picstr="<table width='"+tablew+"' border=0 cellspacing=0 cellpadding=0 align='center'>"
  for(var x=0;x<dex1;x++)
  {
   if (idlist=="")
   {
     idlist=imgarray1[x][1];
   }
  else
  {
    idlist=idlist+","+imgarray1[x][1];
  }
 }
picstr=picstr+"<tr>";
for (var j1=0;j1<dex1;j1++)
{
   temp_str="";   temp_str=temp_str+"<div id='small_title'>";   if (conf_showsmalltitle==1)   {
     temp_str="<span id='div_small_title'>"+imgarray1[j1][2]+"</span>";
   }
   if (conf_showbigimgnav==1)   {
     temp_str=temp_str+"<span id='div_big_nav'><img src=/luckyled/images/showbig.jpg></span>";
   }
   temp_str=temp_str+"</div>"
 picstr=picstr+"<td width="+tdw+" height="+pich+" id='s_img_"+imgarray1[j1][1]+"' valign='middle' align='center'><a href=javascript:showbigimg('"+imgarray1[j1][0]+"','"+imgarray1[j1][2]+"')><img src=\'#\'" /span>+imgarray1[j1][0]+"' width="+picw+" height="+pich+"   /></a><br>"+temp_str+"</td>"
}
picstr=picstr+"</tr>"
picstr=picstr+"</table>"
  if (document.getElementById("div_bigimg"))
  {
    document.getElementById("div_bigimg").innerHTML="<img src=\'#\'" /span>+imgarray1[0][0]+"' />"
    document.getElementById("img_text").innerHTML=""+imgarray1[0][2]+""
  }
document.getElementById("photolist").innerHTML=picstr;
document.getElementById("div_row1").innerHTML=row1;
document.getElementById("div_row2").innerHTML=row2;
}
function showbigimg(str,str2){
  if (document.getElementById("div_bigimg"))
  {
    document.getElementById("div_bigimg").innerHTML="<img src=\'#\'" /span>+str+"' />"
    document.getElementById("img_text").innerHTML=""+str2+""
  }
}
</script>

html代码,页面默认显示的图片

<table width="427" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
  <td width="18" align="right"><div id="div_row1"><img src=/luckyled/images/show_prev1.jpg></div></td>
  <td width="396"><div id="photolist"> <table width="391" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td width=188 align="center">
<a href="javascript:showbigimg('/luckyled/images/Equipment1.jpg','光电测试仪')"><img src="/luckyled/images/Equipment1.jpg" width="173" height="114" /></a><br>
<div id='small_title'>
<span id='div_small_title'>光电测试仪</span>
<span id='div_big_nav'><img src="/luckyled/images/showbig.jpg"></span>
</div>
</td>
<td width=188 align="center">
<a href="javascript:showbigimg('/luckyled/images/Equipment2.jpg','光电烤箱')"><img src="/luckyled/images/Equipment2.jpg" width="173" height="114" /></a><br>
<div id='small_title'>
<span id='div_small_title'>光电烤箱</span>
<span id='div_big_nav'><img src="/luckyled/images/showbig.jpg"></span>
</div>
</td>
 </tr>
 </table>
</div></td><td width="18"><div id="div_row2"><a href="javascript:onclick=pager(2,2,173,114)"><img src=/luckyled/images/show_next2.jpg></a></div></td>
</tr>
</table>
<input type="hidden" id="hisshowsmalltitle" name="hisshowsmalltitle" value="1" />
<input type="hidden" id="hisshowbigimgnav" name="hisshowbigimgnav" value="1" />