图片实现翻页效果

图片翻页效果没有用到复杂的js脚本，而是使用了一个技巧，将全部图片都先一次性显示出来（对于图片不多的情况下，海量当然不适用），然后控制一部分图片的显示与隐藏。

也是为了自己练习拼表格特记录下来。在同一个页面要实现4组图片分页，每行8张。

<Script language="javascript">

function getCount(type)

{

var tds = document.getElementsByTagName("td");

var result = 0;

for(var i = 0 ; i < tds.length;i++)

{

if(tds[i].id.indexOf("td_"+type) != -1)

{

result ++;

}

}

return result;

}

function changePage(objtype,type)

{

var count = getCount(objtype);

var pageNum = parseInt(count/8)+1;

var currentIndex = document.getElementById("txt"+objtype).value*1;

if(type == "down" && currentIndex==1)

{

return;

}

else if(type=="up" && currentIndex == pageNum)

{

return;

}

if(type == "down")

currentIndex--;

else if(type == "up")

currentIndex++;

document.getElementById("txt"+objtype).value = currentIndex;

for(var i = 0 ; i < count;i++)

{

document.getElementById("td_"+objtype+"_"+i).style.display = "none";

}

for(var i = (currentIndex-1) * 8;i< currentIndex*8 ; i++)

{

var obj = document.getElementById("td_"+objtype+"_"+i);

if(obj == null)

{

break;

}

obj.style.display = "inline";

}

}

</Script>
以基金这一组为例：

<div style="MARGIN:18px 10px 10px">

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr>

<td class="tt_ins">基金>></td>

</tr>

</table>

<table class="list_zt" border="0" cellpadding="1" width="960px" cellspacing="0">

<tr valign="top">

<td valign="middle" width="30px">

<img src="images/down.gif" tyle="cursor:hand" onclick="changePage('fund','down');"/>

</td>

<td >

<input type="hidden" id="txtfund" value="1"> <br>

<%=BindDataList("fund")%> </td>

<td valign="middle" width="30px">

<img src="images/up.gif" tyle="cursor:hand" onclick="changePage('fund','up');"/>

</td>

</tr>

</table>

</div>
后台拼表格代码：

protected string BindDataList(string type)

{

System.Text.StringBuilder sb = new System.Text.StringBuilder("");

ArrayList arr = dp.GetEbooksByType(Components.Enum.TopicType.Default,15).Items;

if(arr.Count > 0)

{

this.lblebtitle.Text = ((EBooks)arr[0]).Title;

this.lblebcontent.Text = ((EBooks)arr[0]).Content;

this.HyperlinkUrl.NavigateUrl = ((EBooks)arr[0]).Url;

this.lblebtitle.NavigateUrl = ((EBooks)arr[0]).Url;

this.lblview.Text = ((EBooks)arr[0]).Info1;

this.FMImg.Src = ((EBooks)arr[0]).ImgUrl;

arr.RemoveAt(0);

ArrayList arr1 = null;

if(type == "fund")

{

arr1 = dp.GetEbooksByType(Components.Enum.TopicType.Fund,500).Items;//基金

}

else if(type == "insurance")

{

arr1 = dp.GetEbooksByType(Components.Enum.TopicType.Insurance,500).Items;//保险

}

else if(type == "bank")

{

arr1 = dp.GetEbooksByType(Components.Enum.TopicType.Bank,500).Items;//银行

}

else if(type == "finances")

{

arr1 = dp.GetEbooksByType(Components.Enum.TopicType.Finances,500).Items;//理财讲堂

}

sb.Append("<table cellspacing='0' border='0' width='900px' style='border-collapse:collapse;'>");

sb.Append("<tr>");

for(int i = 0 ; i < arr1.Count;i++)

{

EBooks book = arr1[i] as EBooks;

sb.Append("<td id='td_"+type+"_"+i+"' ");

if(i>7)

{

sb.Append(" style='display:none' ");

}

sb.Append(">");

sb.Append("<a href='"+book.Url+"' target='_blank' style='height:110px;width:80px;'><img src='"+book.Url1+"' alt='' border='0' /></a>");

sb.Append(" <a href='"+book.Url+"' target='_blank'>"+book.Title+"</a>");

sb.Append("</td>");

}

int n=0;//需要补齐的td数

n=(Convert.ToInt32(arr1.Count/8)+1)*8-arr1.Count;

for(int j=0;j<n;j++)

{

int m=arr1.Count+j;

/*当图片不足显示一行的时候用占位的td补齐 style='display:none'的td是不占位的 但翻页的时候还是对齐了是由于第一行是满的，这样后面行的td会自动与第一行的对齐 所以这里要判断一下*/

if(arr1.Count<=8)

{ //这里要占位的

sb.Append("<td id='td_"+type+"_"+m+"' ></td>");

}

else

{ //这里不要占位的

sb.Append("<td id='td_"+type+"_"+m+"' style='display:none'></td>");

}

}

sb.Append("</tr></table>");

}

return sb.ToString();

}
display:none元素不可见并且不占用空间

visibility:hidden不可见但占用原有的空间