【ASP】多張圖片分頁顯示

標籤：vbscript   asp   分頁   翻頁   圖片   

圖片翻頁在一些漫畫、電子書網站中同樣起著中流砥柱的作用

反正網頁編寫的核心就是一頁中不能出現太多內容。

圖片翻頁對比於資料庫查詢的內容分頁顯示功能（點擊開啟連結）簡單得多，因為少了很多資料庫查詢語句，但ASP語句與javascript語句還是存在的。

一、基本目標

首先在images檔案下面，有如下6張圖片，這6張都是WIN7內建的壁紙：

如果在一些漫畫、電子書網站中，這就是N頁紙的掃描出來的圖片。

編寫一個頁面，可以自動翻頁，當向前向後翻完之後，提示給使用者沒有了。

點擊任一一張圖片，能夠自動顯示原圖。這個很簡單的，只學過html的程式猿都會了。

最後，下方的下拉式功能表提示給使用者當前是第幾張圖片，使用者可以自訂要顯示第幾張圖片，這裡由於筆者的粗心打少個“頁”，忽略這些細節，O(∩_∩)O~呵呵

二、製作過程

具體過程見下面的實現代碼，每一段都有注釋了，打漏了那個“頁”字已經補上

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>圖片翻頁</title></head><body><!--拿走穿過來的id變數與per變數，如果拿不到，那麼使用者必定是第一次進入這個頁面了，預設id為1，從第一張圖片開始--><%id=Request.QueryString("id")if id="" thenid=1end if%><!--由於有6張圖片，所以如果id不在1-6之間就是一個非法值--><%if (id<1 or id>6) then%>沒有了<!--給一個瀏覽器的"後退"連結使用者，那就不用考慮id的運算問題了，因為使用者翻到這一頁使用後退能解決很多問題--><a href="javascript:history.go(-1)">返回</a><%else%><!--翻頁改變id值即可。設定圖片則在新視窗開啟，使用者不開大圖，點關閉即可--><!--圖片最初以縮圖的形式，一樣要定義一個不存在邊框的屬性，定義了超級連結的圖片，預設帶一個寬度為1的藍色的邊框--><a href="images/<%=id%>.jpg" target="_new"><img src="images/<%=id%>.jpg" width="480" height="320" border="0" /></a><br /><a href="picpages.asp?id=<%=(id-1)%>">上一頁</a><!--這裡是構造翻頁的下拉式功能表，注意asp的迴圈寫法，必須以loop來結束一次迴圈，迴圈的條件在do while之後，沒有t++的自增運算，只能t=t+1-->第<select id="page"><%t=0do while cint(t)<6%><!--cint(t)=cint(id)是確定當前翻到第幾頁，然後下拉查菜單的預設值便是當前頁的頁數--><!--具體出來的編碼查看網頁的原始碼--><%if (cint(t+1)=cint(id)) then%><option value="<%=t+1%>" selected="selected"><%=t+1%></option><%else%><option value="<%=t+1%>"><%=t+1%></option><%end if%><%t=t+1loop%><!--可以不使用respond.write來輸出，使用< % = >來輸出--></select>/6頁<!--跳轉頁的按鈕需要使用到javascript來翻頁，見最下面的指令碼--><input type="button" onclick="gopage()" value="轉到該頁"/><a href="picpages.asp?id=<%=(id+1)%>">下一頁</a><%end if%></body></html><script>function gopage() {/*拿到現在下拉式功能表所選擇的值，看看使用者要跳到第幾頁，再跳轉*/ var id=document.getElementById("page").value;window.location.href = "picpages.asp?id="+id;} </script>

【ASP】多張圖片分頁顯示