图片实现翻页效果
图片翻页效果没有用到复杂的js脚本，而是使用了一个技巧，将全部图片都先一次性显示出来（对于图片不多的情况下，海量当然不适用），然后控制一部分图片的显示与隐藏。
也是为了自己练习拼表格特记录下来。在同一个页面要实现4组图片分页，每行8张。
<Scriptlanguage="javascript">
functiongetCount(type)
{
vartds=document.getElementsByTagName("td");
varresult=0;
for(vari=0;i<tds.length;i++)
{
if(tds[i].id.indexOf("td_"+type)!=-1)
{
result++;
}
}
returnresult;
}
functionchangePage(objtype,type)
{
varcount=getCount(objtype);
varpageNum=parseInt(count/8)+1;
varcurrentIndex=document.getElementById("txt"+objtype).value*1;
if(type=="down"&¤tIndex==1)
{
return;
}
elseif(type=="up"&¤tIndex==pageNum)
{
return;
}
if(type=="down")
currentIndex--;
elseif(type=="up")
currentIndex++;
document.getElementById("txt"+objtype).value=currentIndex;
for(vari=0;i<count;i++)
{
document.getElementById("td_"+objtype+"_"+i).style.display="none";
}
for(vari=(currentIndex-1)*8;i<currentIndex*8;i++)
{
varobj=document.getElementById("td_"+objtype+"_"+i);
if(obj==null)
{
break;
}
obj.style.display="inline";
}
}
</Script>
functiongetCount(type)
{
vartds=document.getElementsByTagName("td");
varresult=0;
for(vari=0;i<tds.length;i++)
{
if(tds[i].id.indexOf("td_"+type)!=-1)
{
result++;
}
}
returnresult;
}
functionchangePage(objtype,type)
{
varcount=getCount(objtype);
varpageNum=parseInt(count/8)+1;
varcurrentIndex=document.getElementById("txt"+objtype).value*1;
if(type=="down"&¤tIndex==1)
{
return;
}
elseif(type=="up"&¤tIndex==pageNum)
{
return;
}
if(type=="down")
currentIndex--;
elseif(type=="up")
currentIndex++;
document.getElementById("txt"+objtype).value=currentIndex;
for(vari=0;i<count;i++)
{
document.getElementById("td_"+objtype+"_"+i).style.display="none";
}
for(vari=(currentIndex-1)*8;i<currentIndex*8;i++)
{
varobj=document.getElementById("td_"+objtype+"_"+i);
if(obj==null)
{
break;
}
obj.style.display="inline";
}
}
</Script>
以基金这一组为例：
<divstyle="MARGIN:18px10px10px">
<tablewidth="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdclass="tt_ins">基金>></td>
</tr>
</table>
<tableclass="list_zt"border="0"cellpadding="1"width="960px"cellspacing="0">
<trvalign="top">
<tdvalign="middle"width="30px">
<imgsrc="images/down.gif"tyle="cursor:hand"onclick="changePage('fund','down');"/>
</td>
<td>
<inputtype="hidden"id="txtfund"value="1"><br>
<%=BindDataList("fund")%></td>
<tdvalign="middle"width="30px">
<imgsrc="images/up.gif"tyle="cursor:hand"onclick="changePage('fund','up');"/>
</td>
</tr>
</table>
</div>
<tablewidth="100%"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdclass="tt_ins">基金>></td>
</tr>
</table>
<tableclass="list_zt"border="0"cellpadding="1"width="960px"cellspacing="0">
<trvalign="top">
<tdvalign="middle"width="30px">
<imgsrc="images/down.gif"tyle="cursor:hand"onclick="changePage('fund','down');"/>
</td>
<td>
<inputtype="hidden"id="txtfund"value="1"><br>
<%=BindDataList("fund")%></td>
<tdvalign="middle"width="30px">
<imgsrc="images/up.gif"tyle="cursor:hand"onclick="changePage('fund','up');"/>
</td>
</tr>
</table>
</div>
后台拼表格代码：
protectedstringBindDataList(stringtype)
{
System.Text.StringBuildersb=newSystem.Text.StringBuilder("");
ArrayListarr=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);
ArrayListarr1=null;
if(type=="fund")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Fund,500).Items;//基金
}
elseif(type=="insurance")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Insurance,500).Items;//保险
}
elseif(type=="bank")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Bank,500).Items;//银行
}
elseif(type=="finances")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Finances,500).Items;//理财讲堂
}
sb.Append("<tablecellspacing='0'border='0'width='900px'style='border-collapse:collapse;'>");
sb.Append("<tr>");
for(inti=0;i<arr1.Count;i++)
{
EBooksbook=arr1[i]asEBooks;
sb.Append("<tdid='td_"+type+"_"+i+"'");
if(i>7)
{
sb.Append("style='display:none'");
}
sb.Append(">");
sb.Append("<ahref='"+book.Url+"'target='_blank'style='height:110px;width:80px;'><imgsrc='"+book.Url1+"'alt=''border='0'/></a>");
sb.Append("<ahref='"+book.Url+"'target='_blank'>"+book.Title+"</a>");
sb.Append("</td>");
}
intn=0;//需要补齐的td数
n=(Convert.ToInt32(arr1.Count/8)+1)*8-arr1.Count;
for(intj=0;j<n;j++)
{
intm=arr1.Count+j;
/*当图片不足显示一行的时候用占位的td补齐style='display:none'的td是不占位的但翻页的时候还是对齐了是由于第一行是满的，这样后面行的td会自动与第一行的对齐所以这里要判断一下*/
if(arr1.Count<=8)
{//这里要占位的
sb.Append("<tdid='td_"+type+"_"+m+"'></td>");
}
else
{ //这里不要占位的
sb.Append("<tdid='td_"+type+"_"+m+"'style='display:none'></td>");
}
}
sb.Append("</tr></table>");
}
returnsb.ToString();
}
1、MQ实现消息的幂等性
2、声明式验证超时问题
3、产品经理的知识/能力结构框架（图）
4、学习进度条（十五）
5、新加了牛人的Blog链接
{
System.Text.StringBuildersb=newSystem.Text.StringBuilder("");
ArrayListarr=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);
ArrayListarr1=null;
if(type=="fund")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Fund,500).Items;//基金
}
elseif(type=="insurance")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Insurance,500).Items;//保险
}
elseif(type=="bank")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Bank,500).Items;//银行
}
elseif(type=="finances")
{
arr1=dp.GetEbooksByType(Components.Enum.TopicType.Finances,500).Items;//理财讲堂
}
sb.Append("<tablecellspacing='0'border='0'width='900px'style='border-collapse:collapse;'>");
sb.Append("<tr>");
for(inti=0;i<arr1.Count;i++)
{
EBooksbook=arr1[i]asEBooks;
sb.Append("<tdid='td_"+type+"_"+i+"'");
if(i>7)
{
sb.Append("style='display:none'");
}
sb.Append(">");
sb.Append("<ahref='"+book.Url+"'target='_blank'style='height:110px;width:80px;'><imgsrc='"+book.Url1+"'alt=''border='0'/></a>");
sb.Append("<ahref='"+book.Url+"'target='_blank'>"+book.Title+"</a>");
sb.Append("</td>");
}
intn=0;//需要补齐的td数
n=(Convert.ToInt32(arr1.Count/8)+1)*8-arr1.Count;
for(intj=0;j<n;j++)
{
intm=arr1.Count+j;
/*当图片不足显示一行的时候用占位的td补齐style='display:none'的td是不占位的但翻页的时候还是对齐了是由于第一行是满的，这样后面行的td会自动与第一行的对齐所以这里要判断一下*/
if(arr1.Count<=8)
{//这里要占位的
sb.Append("<tdid='td_"+type+"_"+m+"'></td>");
}
else
{ //这里不要占位的
sb.Append("<tdid='td_"+type+"_"+m+"'style='display:none'></td>");
}
}
sb.Append("</tr></table>");
}
returnsb.ToString();
}
display:none元素不可见并且不占用空间
visibility:hidden不可见但占用原有的空间
1、MQ实现消息的幂等性
2、声明式验证超时问题
3、产品经理的知识/能力结构框架（图）
4、学习进度条（十五）
5、新加了牛人的Blog链接