这几天研究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="https://www.jb51.net/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 src='images/"+photo.ImageUrl+"'/></td>");
$("#smallTr").append(td);
}
$("#tmpimg").attr("src","https://www.jb51.net/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>
<form runat="server">
<div>
<input type="button" />
<div>
<table>
<tr>
</tr>
</table>
</div>
<input type="button" />
</div>
<div>
<span>加载中.....</span> <br /> <img src=""/>
</div>
<br />
<div>
共<span><strong>0</strong></span>张， 当前第<span><strong>0</strong></span>张
</div>
</form>
</body>
</html>
viewserver.ashx:
复制代码 代码如下: