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 >

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