MVC3.0图片滚动和相册展示(上)

mvc3.0中实现图片的滚动注意几点：

1.引用autoSizeImage.js 文件、css 样式文件和相应图片文件

2.图片循环遍历出来，放在div1中，后面紧跟一个空div2，复制div1的图片，目的在于防止图片滚动到最后一张出现空白。

  在最外边还有一个大的div id=photo,做为框架使用！

两个div Code

   
     

    
       1 
    
      <
    
      div id
    
      =
    
      "
    
      index_photo1
    
      "
    
      >
    
      

    
       2 
    
       @foreach ()

    
       3 
    
       {

    
       4 
    
       
    
      <
    
      a href
    
      =
    
      "
    
      跳转相册显示
    
      "
    
       rel
    
      =
    
      "
    
      thumb
    
      "
    
      >
    
      

    
       5 
    
       
    
      <
    
      img 
    
      class
    
      =
    
      "
    
      thumb
    
      "
    
       src
    
      =
    
      "
    
      图片链接地址
    
      "
    
       alt
    
      =
    
      "
    
      @data.PHOTO_TITLE
    
      "
    
       
    
      />
    
      

    
       6 
    
      

    
       7 
    
       
    
      </
    
      a
    
      >
    
      

    
       8 
    
       }

    
       9 
    
       
    
      </
    
      div
    
      >
    
      

    
      10 
    
       
    
      <
    
      div id
    
      =
    
      "
    
      index_photo2
    
      "
    
      >
    
      

    
      11 
    
       
    
      </
    
      div
    
      >
   
     

3.在js文件中需要配置两个个参数，其一，图片显示的限制，限制高度/宽度/高宽，其二对缓存的处理

 在view层的代码，即：

View JS Code

   
     

    
       1 
    
      <
    
      script language
    
      =
    
      "
    
      javascript
    
      "
    
       type
    
      =
    
      "
    
      text/javascript
    
      "
    
      >
    
      

    
       2 
    
       $(function ()

    
       3 
    
       {

    
       4 
    
       $(
    
      "
    
      .thumb
    
      "
    
      ).LoadThumImage(
    
      true
    
      , 
    
      90
    
      );

    
       5 
    
       $(
    
      "
    
      a[rel='thumb']
    
      "
    
      ).colorbox({

    
       6 
    
       width: 
    
      "
    
      65%
    
      "
    
      , height: 
    
      "
    
      90%
    
      "
    
      ,

    
       7 
    
       onClosed: function ()

    
       8 
    
       {

    
       9 
    
       MyMar 
    
      =
    
       setInterval(Marquee, speed);

    
      10 
    
       tab.onmouseout 
    
      =
    
       function () { MyMar 
    
      =
    
       setInterval(Marquee, speed) };

    
      11 
    
       }

    
      12 
    
       });

    
      13 
    
       });

    
      14 
    
      

    
      15 
    
       
    
      //
    
       相册滚动
    
      

    
      16 
    
      
    
       var speed 
    
      =
    
       
    
      10
    
      ;

    
      17 
    
       var tab 
    
      =
    
       document.getElementById(
    
      "
    
      photo
    
      "
    
      );

    
      18 
    
       var tab1 
    
      =
    
       document.getElementById(
    
      "
    
      index_photo1
    
      "
    
      );

    
      19 
    
       var tab2 
    
      =
    
       document.getElementById(
    
      "
    
      index_photo2
    
      "
    
      );

    
      20 
    
       tab2.innerHTML 
    
      =
    
       tab1.innerHTML;

    
      21 
    
       function Marquee()

    
      22 
    
       { 

    
      23 
    
       
    
      if
    
       (tab2.offsetWidth 
    
      -
    
       tab.scrollLeft 
    
      <=
    
       
    
      0
    
      )

    
      24 
    
       tab.scrollLeft 
    
      -=
    
       tab1.offsetWidth

    
      25 
    
       
    
      else
    
      

    
      26 
    
       {

    
      27 
    
       tab.scrollLeft
    
      ++
    
      ;

    
      28 
    
       }

    
      29 
    
       }

    
      30 
    
       var MyMar 
    
      =
    
       setInterval(Marquee, speed);

    
      31 
    
       tab.onmouseover 
    
      =
    
       function () { clearInterval(MyMar) };

    
      32 
    
       tab.onmouseout 
    
      =
    
       function () { MyMar 
    
      =
    
       setInterval(Marquee, speed) };

    
      33 
    
       tab.onclick 
    
      =
    
       function ()

    
      34 
    
       {

    
      35 
    
       tab.onmouseout 
    
      =
    
       
    
      null
    
      ;

    
      36 
    
       clearInterval(MyMar);

    
      37 
    
       };

    
      38 
    
       

    
      39 
    
      
    
      </
    
      script
    
      >
   
     

以上总结了对图片滚动和显示功能，至于对相册的左右查看显示再总结下！