MVC3.0圖片滾動和相簿展示(上)

mvc3.0中實現圖片的滾動注意幾點：

1.引用autoSizeImage.js 檔案、css 樣式檔案和相應圖片檔案

2.圖片迴圈遍歷出來，放在div1中，後面緊跟一個空div2，複製div1的圖片，目的在於防止圖片滾動到最後一張出現空白。

  在最外邊還有一個大的div id=photo,做為框架使用！

<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層的程式碼，即：

<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>

以上總結了對圖片滾動和顯示功能，至於對相簿的左右檢視顯示再總結下！