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>
以上总结了对图片滚动和显示功能，至于对相册的左右查看显示再总结下！
