图片实现翻页效果

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