Ajax无刷新实现图片切换特效

时间 2021-07-10

1.页面cs代码

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using AjaxPro;

public partial class _Default:System.Web.UI.Page

{

protectedstringdisplayCategoryID;

protectedvoidPage_Load(objectsender,EventArgse)

{

Utility.RegisterTypeForAjax(typeof(AjaxMethod));

displayCategoryID="17";

}

2.html代码

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head runat ="server" >

< title > Ajax无刷新实现图片切换特效 </ title >

< link type ="text/css" href ="css/tree.css" rel ="stylesheet" >

< link type ="text/css" href ="css/global.css" rel ="stylesheet" >

< script type =text/javascript src =javascript/tree.js ></ script >

</ head >

< body onload ="PreloadImage('<%=displayCategoryID%>');" >

< form id ="form1" runat ="server" >

< div id ="photoarea" style ="width:514px;height:496px;left:0px;top:0px;" >

< div id ="photo" style ="left:5px;top:9px;height:432px;" >

< img id ="slideShow" src ="images/space.gif" style ="filter:revealTrans(duration=2,transition=23)" >

</ div >

< div id ="op" align ="left" style ="left:12px;top:457px" >

< span id ="progress" style ="FONT-SIZE:20px" ></ span >

< img id ="btnPlay" src ="images/play_bw.gif" >

< img id ="btnPause" src ="images/pause_bw.gif" >

< img id ="btnPrev" src ="images/prev_bw.gif" >

< img id ="btnNext" src ="images/next_bw.gif" >

</ div >

< SCRIPT type ="text/javascript" >

//定时器

vartimeDelay;

//图片自动浏览时的时间间隔

vartimeInterval=4000;

//Array对象,存储图片文件的路径

varimage;

//当前显示的图片序号

varnum;

//当前浏览状态,该状态用于控制4个按钮的状态

varnStatus;

//图片显示区域

varslideShow=el("slideShow");

//图片信息数据表

vardt;

//预加载图片信息

functionPreloadImage(iCategoryID)

{

//采用同步调用的方式获取图片的信息

vards=AjaxMethod.GetPhotoList(iCategoryID).value;

//如果返回了结果

if(ds)

{

//判断数据表是否不为空

if(ds.Tables[0].Rows.length>0)

{

//返回的图片信息数据表

dt=ds.Tables[0];

//用image对象存储图片的文件路径

image=newArray();

//图片在Photos目录下

for(vari=0;i<dt.Rows.length;i++)

{

image.push("Photos/"+dt.Rows[i].photo_path);

}

//imagePreload对象用于实现图片的预缓存

varimagePreload=newArray();

for(vari=0;i<image.length;i++)

{

//通过新建Image对象,并将其src属性指向图片的URL

//显现图片的预缓存

imagePreload[i]=newImage();

imagePreload[i].src=image[i];

}

//初始化一些变量

num=-1;

nStatus=0x09;

//加载第一张图片

next_image();

}

else//分类下没有图片

{

alert("该目录下没有图片！");

}

//实现图片切换时的效果

functionimage_effects()

{

//Transition的值为0~23之间的随机数,代表24种切换效果

//具体值与效果之间的对应见MSDN

slideShow.filters.revealTrans.Transition=Math.random()*23;

//应用并播放切换效果

slideShow.filters.revealTrans.apply();

slideShow.filters.revealTrans.play();

}

//切换到上一张图片

functionprevious_image()

{

//图片序号向前移动,如果已经是第一张,则切换到最后一张

num+=image.length-1;

num%=image.length;

//图片切换的效果

image_effects();

//将<img>对象的src属性设置为当前num对应的路径

//切换图片的显示

slideShow.src=image[num];

//获取图片的标题、说明信息

getPhotoInfo();

//设置按钮状态

setBtnStatus();

}

//切换到下一张图片

functionnext_image()

{

//当前图片的序号向后移动,如果已经是最后一张,

//则切换到第一张图片

num++;

num%=image.length;

//图片的切换效果

image_effects();

//将<img>对象的src属性设置为当前num对应的路径

//切换图片的显示

slideShow.src=image[num];

//获取图片的标题、说明信息

getPhotoInfo();

//设置按钮状态

setBtnStatus();

}

//自动浏览图片

functionslideshow_automatic()

{

//当前图片的序号向后移动,如果已经是最后一张,

//则切换到第一张图片

num++;

num%=image.length;

//图片的切换效果

image_effects();

//<img>对象的src属性设置为当前num指定的URL

//切换图片的显示

slideShow.src=image[num];

//获取图片的标题、说明信息

getPhotoInfo();

//设置按钮的状态,使播放按钮失效,暂停按钮有效

nStatus&=0x0E;

nStatus|=0x02;

setBtnStatus();

//slideshow_automatic函数每隔一段时间自动执行

timeDelay=setTimeout("slideshow_automatic()",timeInterval);

}

//停止自动播放

functionpauseSlideShow()

{

//清除定时器,不再执行slideshow_automatic函数

clearTimeout(timeDelay);

//设置按钮的状态,使播放按钮有效,暂停按钮失效

nStatus&=0x0d;

nStatus|=0x01;

setBtnStatus();

}

//设置按钮的状态:

//判断的依据是当前是否处于自动播放的状态

//以及当前显示的图片是否第一张或最后一张图片

functionsetBtnStatus(bDir)

{

//如果是第一张图片

if(num==0)

{

//向前切换图片的按钮失效

nStatus&=0x0b;

}

//如果是最后一张图片

if(num==(image.length-1))

{

//向后切换图片的按钮失效

nStatus&=0x07;

}

//如果既不是最后一张,也不是第一张图片

if(num!=0&&num!=(image.length-1))

{

//向前、向后切换图片的按钮均有效

nStatus|=0x0c;

}

//根据nStatus每一位的值确定4个按钮的背景图

el("btnPlay").src=((nStatus&0x01)==0x01)?

"images/play.gif":"images/play_bw.gif";

el("btnPause").src=((nStatus&0x02)==0x02)?

"images/pause.gif":"images/pause_bw.gif";

el("btnPrev").src=((nStatus&0x04)==0x04)?

"images/prev.gif":"images/prev_bw.gif";

el("btnNext").src=((nStatus&0x08)==0x08)?

"images/next.gif":"images/next_bw.gif";

//根据nStatus每一位的值确定鼠标移动到4个按钮上方时的形状

el("btnPlay").style.cursor=((nStatus&0x01)==0x01)?

"pointer":"default";

el("btnPause").style.cursor=((nStatus&0x02)==0x02)?

"pointer":"default";

el("btnPrev").style.cursor=((nStatus&0x04)==0x04)?

"pointer":"default";

el("btnNext").style.cursor=((nStatus&0x08)==0x08)?

"pointer":"default";

//根据nStatus的每一位确定4个按钮是否具有onclick响应

el("btnPlay").onclick=((nStatus&0x01)==0x01)?

function()

{slideshow_automatic();}:function()

{returnfalse;};

el("btnPause").onclick=((nStatus&0x02)==0x02)?

function()

{pauseSlideShow();}:function()

{returnfalse;};

el("btnPrev").onclick=((nStatus&0x04)==0x04)?

function()

{previous_image();}:function()

{returnfalse;};

el("btnNext").onclick=((nStatus&0x08)==0x08)?

function()

{next_image();}:function()

{returnfalse;};

//显示当前图片浏览的进度

el("progress").innerHTML=(num+1)+"/"+image.length;

}

//获取图片的标题、说明信息

functiongetPhotoInfo()

{

return;

//图片ID号

varid=dt.Rows[num].id;

//如果存在

if(id)

{

//异步调用Ajax方法GetPhotoInfo

AjaxMethod.GetPhotoInfo(id,GetPhotoInfo_callback);

}

//回调函数,根据响应的内容显示标题和说明信息

functionGetPhotoInfo_callback(response)

{

//获取图片的信息

vardt_photo=response.value.Tables[0];

//如果图片存在

if(dt_photo.Rows.length>0)

{

//显示图片的标题和说明

el("title").innerHTML=dt_photo.Rows[0].photo_title;

el("description").innerHTML=dt_photo.Rows[0].photo_description;

}

</ SCRIPT >

</ form >

</ body >

</ html >

3.AjaxMethod类

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using AjaxPro;

/**/ ///<summary>

///SummarydescriptionforAjaxMethod

///</summary>

public class AjaxMethod

{

publicAjaxMethod()

{

//TODO:Addconstructorlogichere

}

publicstaticstringConnectionString=ConfigurationSettings.AppSettings["ConnectionString"].ToString();

GetDataSet#regionGetDataSet

publicstaticDataSetGetDataSet(stringsql)

{

SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);

DataSetds=newDataSet();

sda.Fill(ds);

if(ds!=null)

returnds;

else

returnnull;

}

#endregion

/**////<summary>

///获取某个分类下图片的id和photo_path信息

///</summary>

///<paramname="iCategoryID">分类ID号</param>

///<returns>图片信息(id,photo_path)的信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

publicstaticDataSetGetPhotoList(intiCategoryID)

{

stringsql=string.Format("SELECTid,photo_pathFROMPhotoWHEREphoto_category_id={0}",iCategoryID);

returnGetDataSet(sql);

}

/**////<summary>

///获取图片信息(标题、说明)

///</summary>

///<paramname="id">图片id</param>

///<returns>图片信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

publicstaticDataSetGetPhotoInfo(intid)

{

stringsql=string.Format("SELECTphoto_title,photo_descriptionFROMPhotoWHEREid={0}",id);

returnGetDataSet(sql);

}

4.Web.config

<? xmlversion="1.0" ?>

< configuration >

< appSettings >

< add key ="ConnectionString" value ="DataSource=localhost;userid=sa;password=sa;initialcatalog=DB" />

</ appSettings >

< connectionStrings />

< system .web >

< httpHandlers >

< add verb ="POST,GET" path ="ajaxpro/*.ashx" type ="AjaxPro.AjaxHandlerFactory,AjaxPro" />

</ httpHandlers >

< compilation debug ="false" />

< authentication mode ="Windows" />

</ system.web >

</ configuration >

5.sql脚本

if exists ( select * from dbo.sysobjects where id = object_id (N ' [dbo].[Photo] ' ) and OBJECTPROPERTY (id,N ' IsUserTable ' ) = 1 )

drop table [ dbo ] . [ Photo ]

CREATE TABLE [ dbo ] . [ Photo ] (

[ id ] [ int ] IDENTITY ( 1 , 1 ) NOT NULL ,

[ photo_title ] [ varchar ] ( 128 )COLLATEChinese_PRC_CI_AS NULL ,

[ photo_description ] [ text ] COLLATEChinese_PRC_CI_AS NULL ,

[ photo_category_id ] [ int ] NULL ,

[ photo_path ] [ varchar ] ( 255 )COLLATEChinese_PRC_CI_AS NULL

) ON [ PRIMARY ] TEXTIMAGE_ON [ PRIMARY ]

6.原代码 /Files/singlepine/AjaxChangeImage.rar