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 
{
    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 >
                     &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" >
            
            // 定时器
            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();
           &nbs