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 
{
protected string displayCategoryID; protected void Page_Load(object sender, EventArgs e)
{ 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> </div> <SCRIPT type="text/javascript"> // 定时器 var timeDelay; // 图片自动浏览时的时间间隔 var timeInterval = 4000; // Array对象,存储图片文件的路径 var image; // 当前显示的图片序号 var num; // 当前浏览状态,该状态用于控制4个按钮的状态 var nStatus; // 图片显示区域 var slideShow = el("slideShow"); // 图片信息数据表 var dt; // 预加载图片信息 function PreloadImage(iCategoryID) { // 采用同步调用的方式获取图片的信息 var ds = AjaxMethod.GetPhotoList(iCategoryID).value; // 如果返回了结果 if (ds) { // 判断数据表是否不为空 if (ds.Tables[0].Rows.length > 0) { // 返回的图片信息数据表 dt = ds.Tables[0]; // 用image对象存储图片的文件路径 image = new Array(); // 图片在Photos目录下 for (var i = 0; i < dt.Rows.length; i++) { image.push("Photos/" + dt.Rows[i].photo_path); } // imagePreload对象用于实现图片的预缓存 var imagePreload = new Array(); for (var i = 0;i < image.length;i++) { // 通过新建Image对象,并将其src属性指向图片的URL // 显现图片的预缓存 imagePreload[i] = new Image(); imagePreload[i].src = image[i]; } // 初始化一些变量 num = -1; nStatus = 0x09; // 加载第一张图片 next_image(); } else // 分类下没有图片 { alert("该目录下没有图片！"); } } } // 实现图片切换时的效果 function image_effects() { // Transition的值为0~23之间的随机数,代表24种切换效果 // 具体值与效果之间的对应见MSDN slideShow.filters.revealTrans.Transition = Math.random() * 23; // 应用并播放切换效果 slideShow.filters.revealTrans.apply(); slideShow.filters.revealTrans.play(); } // 切换到上一张图片 function previous_image() { // 图片序号向前移动,如果已经是第一张,则切换到最后一张 num += image.length - 1; num %= image.length; // 图片切换的效果 image_effects(); // 将<img>对象的src属性设置为当前num对应的路径 // 切换图片的显示 slideShow.src = image[num]; // 获取图片的标题、说明信息 getPhotoInfo(); // 设置按钮状态 setBtnStatus(); } // 切换到下一张图片 function next_image() { // 当前图片的序号向后移动,如果已经是最后一张, // 则切换到第一张图片 num++; num %= image.length; // 图片的切换效果 image_effects(); // 将<img>对象的src属性设置为当前num对应的路径 // 切换图片的显示 slideShow.src = image[num]; // 获取图片的标题、说明信息 getPhotoInfo(); // 设置按钮状态 setBtnStatus(); } // 自动浏览图片 function slideshow_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); } // 停止自动播放 function pauseSlideShow() { // 清除定时器,不再执行slideshow_automatic函数 clearTimeout(timeDelay); // 设置按钮的状态,使播放按钮有效,暂停按钮失效