澳门皇冠金沙网站-澳门皇冠844网站

热门关键词: 澳门皇冠金沙网站,澳门皇冠844网站

Ajax无刷新实现图片切换特效,jquery动态加载图片

锋利的jquery 这里笔者只是随意做了下,上边是照片列表和三个开关,单击小图片...

二、页面HTML代码:

复制代码 代码如下:

原帖地址:

<%@ 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; }
}
}
}

四、在主页面包车型大巴ONLOAD事件之中加多:

复制代码 代码如下:

一、AjaxMethod

目前钻探jquery,感受到了该库的兵不血刃,并且找到本未可厚非的书 <<锋利的jquery>>
此地自身只是无论做了下,上面是相片列表和多个按键,单击小图片上面展现大图片,当点击开关时方可查阅下一页,上一页的图样。
思路:
  1、首先建叁个相片查看页面viewer.htm,轻便布局,上面是小图片和多少个开关,下边是大图片。
  2、建八个貌似管理程序viewServer.ashx,用来拍卖照片查看页面包车型大巴诉求。
  3、然后当然要用到数据库啦,包罗图片的不二秘籍,描述等新闻。每张小图片路线应该相应一张大图片,单击小图片时候再加载,这里本身没做小图片所以都用大图片加载了。
  4、数据传输使用json,建构多个加载图片的函数,当页面加载只怕单击left、right按键的时候,通过ajax加载图片,将呼吁图片的始发编号、甘休编号传递到后台页面,
    后台页面抽出央浼新闻后,在数据库中寻找所需图片信息。
效果如图:
图片 1
贯彻代码:
viewer.htm

五、WebConfig添加:
       <system.web>
       <httpHandlers>
            <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro" />
     </httpHandlers>

当中sqlHelper是自个儿自定义的数据库访谈类,比较简单就不贴出来了。
在促成进程中相见一个ajax方面包车型客车题材,未来大概没搞太精晓:
本人的js代码中有三个供给函数,三个是获得图片总的数量getCountPhoto(),三个是加载图片的集体函数loadPhoto(startId,endId),小编想在页面加载的时候还要调用那四个函数,分别展现出页码消息和求实图片列表,

图片 2<div id="Layer1" style="Z-INDEX:1; LEFT:104px; WIDTH:501px; POSITION:absolute; TOP:28px; HEIGHT:345px">
图片 3                <img name="slideShow" src="images/space.gif" width="500" height="300" style="FILTER:revealTrans(duration=2,transition=23)">
图片 4            </div>
图片 5            <div id="Layer2" style="Z-INDEX:2; LEFT:490px; WIDTH:112px; POSITION:absolute; TOP:380px; HEIGHT:26px">
图片 6                <img id="btnPlay" src="images/play_bw.gif" onclick="slideshow_automatic()" onmouseover="this.src='images/play.gif'"
图片 7                    onmouseout="this.src='images/play_bw.gif'"> <img id="btnPause" src="images/pause_bw.gif" onclick="pauseSlideShow()" onmouseover="this.src='images/pause.gif'"
图片 8                    onmouseout="this.src='images/pause_bw.gif'"> <img id="btnPrev" src="images/prev_bw.gif" onclick="previous_image()" onmouseover="this.src='images/prev.gif'"
图片 9                    onmouseout="this.src='images/prev_bw.gif'"> <img id="btnNext" src="images/next_bw.gif" onclick="next_image()" onmouseover="this.src='images/next.gif';next_image()"
图片 10                    onmouseout="this.src='images/next_bw.gif'">
图片 11            </div>

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

      <configuration>
       <appSettings>
           <add key="ConnectionString" value="server=127.0.0.1;database=test;uid=sa;pwd=dfdf" /> 
       </appSettings>   
六、数据库脚本:       

本文由澳门皇冠金沙网站发布于前端开发,转载请注明出处:Ajax无刷新实现图片切换特效,jquery动态加载图片