当前位置:Gxlcms > JavaScript > jquery动态加载图片数据练习代码_jquery

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

时间:2021-07-01 10:21:17 帮助过:35人阅读

这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>>
这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片。
思路:
  1、首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片。
  2、建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求。
  3、然后当然要用到数据库啦,包括图片的路径,描述等信息。每张小图片路径应该对应一张大图片,单击小图片时候再加载,这里我没做小图片所以都用大图片加载了。
  4、数据传输使用json,建立一个加载图片的函数,当页面加载或者单击left、right按钮的时候,通过ajax加载图片,将请求图片的开始编号、结束编号传递到后台页面,
    后台页面收到请求信息后,在数据库中查找所需图片信息。
效果如图:

实现代码:
viewer.htm
代码如下:




我的照片