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

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 >
&nbsp;&nbsp;&nbsp;
< 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 >
</ 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);

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

分享到：

Ajax实现无刷新树 | DataHelper

• 2007-03-19 22:56
• 浏览 167
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论