jquery動態加載圖片數據練習代碼
編輯：JQuery特效代碼
這幾天研究jquery，感受到了該庫的強大，而且找到本不錯的書 <<鋒利的jquery>>
這裡我只是隨便做了下，上面是照片列表和兩個按鈕，單擊小圖片下面顯示大圖片，當點擊按鈕時可以查看下一頁，上一頁的圖片。
思路：
1、首先建一個照片查看頁面viewer.htm，簡單布局，上面是小圖片和兩個按鈕，下面是大圖片。
2、建一個一般處理程序viewServer.ashx，用來處理照片查看頁面的請求。
3、然後當然要用到數據庫啦，包括圖片的路徑，描述等信息。每張小圖片路徑應該對應一張大圖片，單擊小圖片時候再加載，這裡我沒做小圖片所以都用大圖片加載了。
4、數據傳輸使用json，建立一個加載圖片的函數，當頁面加載或者單擊left、right按鈕的時候，通過ajax加載圖片，將請求圖片的開始編號、結束編號傳遞到後台頁面，
後台頁面收到請求信息後，在數據庫中查找所需圖片信息。
效果如圖：
實現代碼：
viewer.htm
代碼如下:
<!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);//頁面加載函數,每次顯示9張圖片，加載時候顯示1-9
$("#count").text("1");
$("#leftBtn").click(function(){
var firstIndex=parseInt($("#smallTr :first-child image").attr("id"),10);
if(firstIndex<=1){ //如果已經到第一頁了
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)){ //如果已經到最後一頁了
return;
}
else{
var startId=lastIndex+1;
var endId=startId+8;
$("#count").text(startId);
loadPhoto(startId,endId);
}
});
});
//獲取圖片總數
function getCountPhoto(){
$.post("viewServer.ashx",{"action":"countPhoto"},function(data,status){
if(status!="success"){
alert("圖片總數加載失敗！");
}
else{
$("#sum").text(data);
}
});
};
//加載圖片的公共函數，索引從startid到endId
function loadPhoto(startId,endId){
$.post("viewServer.ashx",{"startId":startId,"endId":endId,"action":"getData"},function(data,status){ //告訴後台要哪幾張圖片
if(status!="success"){
alert("小圖片加載失敗！");
}
else{
getCountPhoto(); //獲取圖片總數
$("#smallTr").empty();
var photos=$.parseJSON(data); //使用json傳遞數據，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);
}
//為每個小圖片設置mouseover和click事件
$("#smallTr img").mouseenter(function(){
$(this).attr("cursor","pointer");
})
.click(function(){
$("#count").text($(this).attr("id"));
$("#tmpimg").attr("src",$(this).attr("src"));
});
});
};
//如果圖片加載過慢，提示加載中。。。。
$("#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 /> <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>張， 當前第<span id="count" style="visibility:visible;"><strong>0</strong></span>張
</div>
</form>
</body>
</html>
viewserver.ashx:
代碼如下:
<%@ 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") //統計共有多少圖片
{
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") //請求圖片數據
{
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"
//這個查詢語句有點小復雜，使用了開窗函數
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();//將數據序列化為json數據
context.Response.Write(jss.Serialize(list));
}
}
public bool IsReusable
{
get
{
return false;
}
}
//封裝一個照片類，然後使用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; //圖片編號
public int Id
{
get { return id; }
set { id = value; }
}
private string imageName;//圖片名稱
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是我自定義的數據庫訪問類，比較簡單就不貼出來了。
在實現過程中遇到一個ajax方面的問題，現在還是沒搞太明白：
我的js代碼中有兩個請求函數，一個是獲取圖片總數getCountPhoto(),一個是加載圖片的公共函數loadPhoto(startId,endId),我想在頁面加載的時候同時調用這兩個函數，分別顯示出頁碼信息和具體圖片列表，
代碼如下:
$(function(){
loadPhoto(1,9);
getCountPhoto();
}
這樣的話發現頁面內容總是錯誤，經過調試發現原來兩個ajax請求是交叉執行，並不是一個執行完成執行另一個的。
這就是前幾天做的了。
這裡我只是隨便做了下，上面是照片列表和兩個按鈕，單擊小圖片下面顯示大圖片，當點擊按鈕時可以查看下一頁，上一頁的圖片。
思路：
1、首先建一個照片查看頁面viewer.htm，簡單布局，上面是小圖片和兩個按鈕，下面是大圖片。
2、建一個一般處理程序viewServer.ashx，用來處理照片查看頁面的請求。
3、然後當然要用到數據庫啦，包括圖片的路徑，描述等信息。每張小圖片路徑應該對應一張大圖片，單擊小圖片時候再加載，這裡我沒做小圖片所以都用大圖片加載了。
4、數據傳輸使用json，建立一個加載圖片的函數，當頁面加載或者單擊left、right按鈕的時候，通過ajax加載圖片，將請求圖片的開始編號、結束編號傳遞到後台頁面，
後台頁面收到請求信息後，在數據庫中查找所需圖片信息。
效果如圖：
實現代碼：
viewer.htm
代碼如下:
<!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);//頁面加載函數,每次顯示9張圖片，加載時候顯示1-9
$("#count").text("1");
$("#leftBtn").click(function(){
var firstIndex=parseInt($("#smallTr :first-child image").attr("id"),10);
if(firstIndex<=1){ //如果已經到第一頁了
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)){ //如果已經到最後一頁了
return;
}
else{
var startId=lastIndex+1;
var endId=startId+8;
$("#count").text(startId);
loadPhoto(startId,endId);
}
});
});
//獲取圖片總數
function getCountPhoto(){
$.post("viewServer.ashx",{"action":"countPhoto"},function(data,status){
if(status!="success"){
alert("圖片總數加載失敗！");
}
else{
$("#sum").text(data);
}
});
};
//加載圖片的公共函數，索引從startid到endId
function loadPhoto(startId,endId){
$.post("viewServer.ashx",{"startId":startId,"endId":endId,"action":"getData"},function(data,status){ //告訴後台要哪幾張圖片
if(status!="success"){
alert("小圖片加載失敗！");
}
else{
getCountPhoto(); //獲取圖片總數
$("#smallTr").empty();
var photos=$.parseJSON(data); //使用json傳遞數據，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);
}
//為每個小圖片設置mouseover和click事件
$("#smallTr img").mouseenter(function(){
$(this).attr("cursor","pointer");
})
.click(function(){
$("#count").text($(this).attr("id"));
$("#tmpimg").attr("src",$(this).attr("src"));
});
});
};
//如果圖片加載過慢，提示加載中。。。。
$("#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 /> <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>張， 當前第<span id="count" style="visibility:visible;"><strong>0</strong></span>張
</div>
</form>
</body>
</html>
viewserver.ashx:
代碼如下:
<%@ 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") //統計共有多少圖片
{
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") //請求圖片數據
{
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"
//這個查詢語句有點小復雜，使用了開窗函數
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();//將數據序列化為json數據
context.Response.Write(jss.Serialize(list));
}
}
public bool IsReusable
{
get
{
return false;
}
}
//封裝一個照片類，然後使用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; //圖片編號
public int Id
{
get { return id; }
set { id = value; }
}
private string imageName;//圖片名稱
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是我自定義的數據庫訪問類，比較簡單就不貼出來了。
在實現過程中遇到一個ajax方面的問題，現在還是沒搞太明白：
我的js代碼中有兩個請求函數，一個是獲取圖片總數getCountPhoto(),一個是加載圖片的公共函數loadPhoto(startId,endId),我想在頁面加載的時候同時調用這兩個函數，分別顯示出頁碼信息和具體圖片列表，
代碼如下:
$(function(){
loadPhoto(1,9);
getCountPhoto();
}
這樣的話發現頁面內容總是錯誤，經過調試發現原來兩個ajax請求是交叉執行，並不是一個執行完成執行另一個的。
這就是前幾天做的了。
- 上一頁:jquery裡的正則表達式說明
- 下一頁:基於jquery的浮動層效果代碼
小編推薦
熱門推薦