首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jquery动态加载图片数据练习代码

Posted in Javascript onAugust 04, 2011

这几天研究jquery，感受到了该库的强大，而且找到本不错的书 <<锋利的jquery>>
这里我只是随便做了下，上面是照片列表和两个按钮，单击小图片下面显示大图片，当点击按钮时可以查看下一页，上一页的图片。
思路：

1、首先建一个照片查看页面viewer.htm，简单布局，上面是小图片和两个按钮，下面是大图片。

2、建一个一般处理程序viewServer.ashx，用来处理照片查看页面的请求。

3、然后当然要用到数据库啦，包括图片的路径，描述等信息。每张小图片路径应该对应一张大图片，单击小图片时候再加载，这里我没做小图片所以都用大图片加载了。

4、数据传输使用json，建立一个加载图片的函数，当页面加载或者单击left、right按钮的时候，通过ajax加载图片，将请求图片的开始编号、结束编号传递到后台页面，

后台页面收到请求信息后，在数据库中查找所需图片信息。
效果如图：
jquery动态加载图片数据练习代码
实现代码：
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动态加载图片数据练习代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
jQuery实现的小图列表，大图展示效果幻灯片示例
Oct 25 Javascript
JSONP跨域请求
Mar 02 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
jquery里的正则表达式说明
Aug 03 #Javascript
基于jQuery的图片剪切插件
Aug 03 #Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 #Javascript
JavaScript 一道字符串分解的题目
Aug 03 #Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 #Javascript
JavaScript 大数据相加的问题
Aug 03 #Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 #Javascript
PL660(1) SRF-S83(1) MX500(1) SRF-S84(1) S2000(3) 南麂列岛(1) Panasonic(1) 台湾(1) 松下(1) 根德(2)
You might like
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JavaScript 高级篇之函数 （四）
2012/04/07 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
2015/01/19 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript闭包相关知识解析
2019/10/19 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python单元和文档测试实例详解
2019/04/11 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
阿迪达斯芬兰官方网站：adidas芬兰
2017/01/30 全球购物
巴西箱包、背包、钱包和旅行配件购物网站：Inovathi
2019/12/14 全球购物
同学聚会策划方案
2014/06/06 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
用python画城市轮播地图
2021/05/28 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers