图片实现翻页效果

     图片翻页效果没有用到复杂的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">基金&gt;&gt;</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不可见但占用原有的空间