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

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

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

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

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

<div id="index_photo1">
                @foreach ()
                {
                    <a href="跳转相册显示" rel="thumb">
                        <img class="thumb" src="图片链接地址"    alt="@data.PHOTO_TITLE" />

                    </a>
                }
 </div>
 <div id="index_photo2">
 </div>

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

 在view层的代码，即：

<script language="javascript" type="text/javascript">
    $(function ()
    {
        $(".thumb").LoadThumImage(true, 90);
        $("a[rel='thumb']").colorbox({
             "65%", height: "90%",
            onClosed: function ()
            {
                MyMar = setInterval(Marquee, speed);
                tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
            }
        });
    });

    // 相册滚动
    var speed = 10;
    var tab = document.getElementById("photo");
    var tab1 = document.getElementById("index_photo1");
    var tab2 = document.getElementById("index_photo2");
    tab2.innerHTML = tab1.innerHTML;
    function Marquee()
    { 
        if (tab2.offsetWidth - tab.scrollLeft <= 0)
            tab.scrollLeft -= tab1.offsetWidth
        else
        {
            tab.scrollLeft++;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    tab.onmouseover = function () { clearInterval(MyMar) };
    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
    tab.onclick = function ()
    {
        tab.onmouseout = null;
        clearInterval(MyMar);
    };
     
</script>

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