jquery動(dòng)態(tài)加載圖片數(shù)據(jù)練習(xí)代碼

更新時(shí)間：2011年08月04日 00:18:35 作者：

這里我只是隨便做了下，上面是照片列表和兩個(gè)按鈕，單擊小圖片下面顯示大圖片，當(dāng)點(diǎn)擊按鈕時(shí)可以查看下一頁(yè)，上一頁(yè)的圖片。

這幾天研究jquery，感受到了該庫(kù)的強(qiáng)大，而且找到本不錯(cuò)的書(shū) <<鋒利的jquery>>
這里我只是隨便做了下，上面是照片列表和兩個(gè)按鈕，單擊小圖片下面顯示大圖片，當(dāng)點(diǎn)擊按鈕時(shí)可以查看下一頁(yè)，上一頁(yè)的圖片。
思路：
　　1、首先建一個(gè)照片查看頁(yè)面viewer.htm，簡(jiǎn)單布局，上面是小圖片和兩個(gè)按鈕，下面是大圖片。
　　2、建一個(gè)一般處理程序viewServer.ashx，用來(lái)處理照片查看頁(yè)面的請(qǐng)求。
　　3、然后當(dāng)然要用到數(shù)據(jù)庫(kù)啦，包括圖片的路徑，描述等信息。每張小圖片路徑應(yīng)該對(duì)應(yīng)一張大圖片，單擊小圖片時(shí)候再加載，這里我沒(méi)做小圖片所以都用大圖片加載了。
　　4、數(shù)據(jù)傳輸使用json，建立一個(gè)加載圖片的函數(shù)，當(dāng)頁(yè)面加載或者單擊left、right按鈕的時(shí)候，通過(guò)ajax加載圖片，將請(qǐng)求圖片的開(kāi)始編號(hào)、結(jié)束編號(hào)傳遞到后臺(tái)頁(yè)面，
　　　　后臺(tái)頁(yè)面收到請(qǐng)求信息后，在數(shù)據(jù)庫(kù)中查找所需圖片信息。
效果如圖：

實(shí)現(xiàn)代碼：
viewer.htm

復(fù)制代碼代碼如下:

 
<!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> 
<title>我的照片</title> 
<style type="text/css"> 
#top{width:1000px;height:100px;margin:auto;} 
#leftBtn{width: 18px; text-align: left;height: 100px; float:left; background-image: url(images/images/left.jpg);} 
#rightBtn{width: 18px; height: 100px; float:right;background-image: url(images/images/right.jpg);} 
#smallPhoto{ text-align: center; float:left;margin-left:10px;margin-right:5px; } 
#bigPhoto{width:1000px;height:600px;text-align:center;margin:auto;} 
.photo{width:100px; height:100px;cursor:pointer;} 
#bottom{width:1000px;height:50px;margin:auto;} 
</style> 
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 
loadPhoto(1,9);//頁(yè)面加載函數(shù),每次顯示9張圖片，加載時(shí)候顯示1-9 
$("#count").text("1"); 
$("#leftBtn").click(function(){ 
var firstIndex=parseInt($("#smallTr :first-child image").attr("id"),10); 
if(firstIndex<=1){ //如果已經(jīng)到第一頁(yè)了 
return; 
} 
else{ 
var startId=firstIndex-9; 
var endId=startId+8; 
$("#count").text(startId); 
loadPhoto(startId,endId); 
} 
}); 
$("#rightBtn").click(function(){ 
var sum=$("#sum").text(); 
var lastIndex=parseInt($("#smallTr :last-child image").attr("id"),10); 
if(lastIndex>=parseInt(sum,10)){ //如果已經(jīng)到最后一頁(yè)了 
return; 
} 
else{ 
var startId=lastIndex+1; 
var endId=startId+8; 
$("#count").text(startId); 
loadPhoto(startId,endId); 
} 
}); 
}); 
//獲取圖片總數(shù) 
function getCountPhoto(){ 
$.post("viewServer.ashx",{"action":"countPhoto"},function(data,status){ 
if(status!="success"){ 
alert("圖片總數(shù)加載失??！"); 
} 
else{ 
$("#sum").text(data); 
} 
}); 
}; 
//加載圖片的公共函數(shù)，索引從startid到endId 
function loadPhoto(startId,endId){ 
$.post("viewServer.ashx",{"startId":startId,"endId":endId,"action":"getData"},function(data,status){ //告訴后臺(tái)要哪幾張圖片 
if(status!="success"){ 
alert("小圖片加載失?。?); 
} 
else{ 
getCountPhoto(); //獲取圖片總數(shù) 
$("#smallTr").empty(); 
var photos=$.parseJSON(data); //使用json傳遞數(shù)據(jù)，json用著就是爽啊 
for(var i=0;i<photos.length;i++){ 
var photo=photos[i]; 
var td=$("<td ><img id='"+photo.Rownum+"' class='photo' src='images/"+photo.ImageUrl+"'/></td>"); 
$("#smallTr").append(td); 
} 
$("#tmpimg").attr("src","images/"+photos[0].ImageUrl); 
} 
//為每個(gè)小圖片設(shè)置mouseover和click事件 
$("#smallTr img").mouseenter(function(){ 
$(this).attr("cursor","pointer"); 
}) 
.click(function(){ 
$("#count").text($(this).attr("id")); 
$("#tmpimg").attr("src",$(this).attr("src")); 
}); 
}); 
}; 
//如果圖片加載過(guò)慢，提示加載中。。。。 
$("#loading").ajaxStart(function(){ 
$(this).show(); 
}) 
.ajaxStop(function(){ 
$(this).hide(); 
}); 
</script> 
</head> 
<body style="text-align: center;"> 
<form id="form1" runat="server"> 
<div id="top" style="text-align: center"> 
<input id="leftBtn" type="button" /> 
<div id="smallPhoto"> 
<table> 
<tr id="smallTr"> 
</tr> 
</table> 
</div> 
<input id="rightBtn" type="button" /> 
</div> 
<div id="bigPhoto"> 
<span style="display:none;" id="loading">加載中.....</span> <br />&nbsp;<img id="tmpimg" src="" style="position: relative; height: 600px; width: 800px;"/> 
</div> 
<br /> 
<div id="bottom"> 
共<span id="sum" style="visibility: visible;"><strong>0</strong></span>張， 當(dāng)前第<span id="count" style="visibility:visible;"><strong>0</strong></span>張 
</div> 
</form> 
</body> 
</html> 

viewserver.ashx:

復(fù)制代碼代碼如下:

 
<%@ WebHandler Language="C#" Class="viewServer" %> 
using System; 
using System.Web; 
using System.Data.SqlClient; 
using System.Data; 
using System.Collections.Generic; 
public class viewServer : IHttpHandler 
{ 
public void ProcessRequest(HttpContext context) 
{ 
context.Response.ContentType = "text/plain"; 
string action = context.Request["action"].ToString(); 
if (action == "countPhoto") //統(tǒng)計(jì)共有多少圖片 
{ 
string sql = "select count(*) from T_SmallPhotos"; 
DataTable dt = sqlHelper.GetTable(sql); 
int count = Convert.ToInt32(dt.Rows[0][0]); 
context.Response.Write(count.ToString()); 
} 
else if (action == "getData") //請(qǐng)求圖片數(shù)據(jù) 
{ 
string startId = context.Request["startId"].ToString(); 
string endId = context.Request["endId"].ToString(); 
//string sqlStr = string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum >= 1 AND t .rownum <=5" 
//這個(gè)查詢(xún)語(yǔ)句有點(diǎn)小復(fù)雜，使用了開(kāi)窗函數(shù) 
string sqlStr = "SELECT * FROM (SELECT id, [imageName], [imageUrl], [imageAlt], [notes], Row_Number() OVER (ORDER BY id) rownum FROM T_SmallPhotos) t WHERE t .rownum >= @startId AND t .rownum <= @endId"; 
//string sqlStr = "SELECT [id], [imageName], [imageUrl], [imageAlt], [notes] FROM [T_SmallPhotos] where id>1 and id<10"; 
SqlParameter[] param = new SqlParameter[] {new SqlParameter("@startId",startId), 
new SqlParameter("@endId",endId)}; 
DataTable dt = sqlHelper.GetTable(sqlStr, param); 
List<Photo> list = new List<Photo>(); 
for (int i = 0; i < dt.Rows.Count; i++) 
{ 
list.Add(new Photo(Convert.ToInt32(dt.Rows[i][0]), dt.Rows[i][1].ToString(), dt.Rows[i][2].ToString(), dt.Rows[i][3].ToString(), dt.Rows[i][4].ToString(), Convert.ToInt32(dt.Rows[i][5]))); 
} 
System.Web.Script.Serialization.JavaScriptSerializer jss = new System.Web.Script.Serialization.JavaScriptSerializer();//將數(shù)據(jù)序列化為json數(shù)據(jù) 
context.Response.Write(jss.Serialize(list)); 
} 
} 
public bool IsReusable 
{ 
get 
{ 
return false; 
} 
} 
//封裝一個(gè)照片類(lèi)，然后使用json傳遞 
public class Photo 
{ 
public Photo(int i, string name, string url, string alt, string notes, int rownum) 
{ 
id = i; 
imageName = name; 
imageUrl = url; 
imageAlt = alt; 
this.notes = notes; 
this.rownum = rownum; 
} 
private int id; //圖片編號(hào) 
public int Id 
{ 
get { return id; } 
set { id = value; } 
} 
private string imageName;//圖片名稱(chēng) 
public string ImageName 
{ 
get { return imageName; } 
set { imageName = value; } 
} 
private string imageUrl; //圖片路徑 
public string ImageUrl 
{ 
get { return imageUrl; } 
set { imageUrl = value; } 
} 
private string imageAlt; //圖片描述 
public string ImageAlt 
{ 
get { return imageAlt; } 
set { imageAlt = value; } 
} 
private string notes; 
public string Notes 
{ 
get { return notes; } 
set { notes = value; } 
} 
private int rownum; 
public int Rownum 
{ 
get { return rownum; } 
set { rownum = value; } 
} 
} 
} 

其中sqlHelper是我自定義的數(shù)據(jù)庫(kù)訪問(wèn)類(lèi)，比較簡(jiǎn)單就不貼出來(lái)了。
在實(shí)現(xiàn)過(guò)程中遇到一個(gè)ajax方面的問(wèn)題，現(xiàn)在還是沒(méi)搞太明白：
我的js代碼中有兩個(gè)請(qǐng)求函數(shù)，一個(gè)是獲取圖片總數(shù)getCountPhoto(),一個(gè)是加載圖片的公共函數(shù)loadPhoto(startId,endId),我想在頁(yè)面加載的時(shí)候同時(shí)調(diào)用這兩個(gè)函數(shù)，分別顯示出頁(yè)碼信息和具體圖片列表，

復(fù)制代碼代碼如下:

 
$(function(){ 
loadPhoto(1,9); 
　　　　getCountPhoto(); 
} 

這樣的話發(fā)現(xiàn)頁(yè)面內(nèi)容總是錯(cuò)誤，經(jīng)過(guò)調(diào)試發(fā)現(xiàn)原來(lái)兩個(gè)ajax請(qǐng)求是交叉執(zhí)行，并不是一個(gè)執(zhí)行完成執(zhí)行另一個(gè)的。
這就是前幾天做的了。

您可能感興趣的文章: