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();
                
                // 将<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);

                // 设置按钮的状态,使播放按钮有效,暂停按钮失效
                nStatus &= 0x0d;
                nStatus |= 0x01;
                setBtnStatus();                
            }
            
             //  设置按钮的状态:
             //  判断的依据是当前是否处于自动播放的状态
             //  以及当前显示的图片是否第一张或最后一张图片
            function setBtnStatus(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() {return false;};
                el("btnPause").onclick = ((nStatus & 0x02) == 0x02) ?
                    function() {pauseSlideShow();} : function() {return false;};
                el("btnPrev").onclick = ((nStatus & 0x04) == 0x04) ?
                    function() {previous_image();} : function() {return false;};
                el("btnNext").onclick = ((nStatus & 0x08) == 0x08) ?
                    function() {next_image();} : function() {return false;};
                
                // 显示当前图片浏览的进度
                el("progress").innerHTML = (num + 1) + " / " + image.length;
            }
            
             //  获取图片的标题、说明信息
            function getPhotoInfo()
             {
                return;
                // 图片ID号
                var id = dt.Rows[num].id;
                
                // 如果存在
                if (id)
                {
                    // 异步调用Ajax方法GetPhotoInfo
                    AjaxMethod.GetPhotoInfo(id, GetPhotoInfo_callback);
                }
            }
            
             //  回调函数,根据响应的内容显示标题和说明信息
            function GetPhotoInfo_callback(response)
             {
                // 获取图片的信息
                var dt_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>
/// Summary description for AjaxMethod
/// </summary>
public   class  AjaxMethod
{
    public AjaxMethod()
    {
        //
        // TODO: Add constructor logic here
        //
    }
    public static string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

    GetDataSetGetDataSet#region GetDataSet
    public static DataSet GetDataSet(string sql)
    {
        SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
        DataSet ds = new DataSet();
        sda.Fill(ds);
        if (ds != null)
            return ds;
        else
            return null;
    }
    #endregion
    
    /**//**//**//// <summary>
    /// 获取某个分类下图片的id和photo_path信息
    /// </summary>
    /// <param name="iCategoryID">分类ID号</param>
    /// <returns>图片信息(id, photo_path)的信息</returns>
    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetPhotoList(int iCategoryID)
    {
        string sql = string.Format("SELECT id, photo_path FROM Photo WHERE photo_category_id = {0}", iCategoryID);
        return GetDataSet(sql);
    }

    /**//**//**//// <summary>
    /// 获取图片信息(标题、说明)
    /// </summary>
    /// <param name="id">图片id</param>
    /// <returns>图片信息</returns>
    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetPhotoInfo(int id)
    {
        string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);

        return GetDataSet(sql);
    }
    
}
// 4.Web.config
<? xml version = " 1.0 " ?>
< configuration >
   < appSettings >
     < add key = " ConnectionString "  value = " Data Source=localhost;user id=sa;password=sa;initial catalog=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]
GO

CREATE TABLE [dbo].[Photo] (
    [id] [ int ] IDENTITY ( 1 ,  1 ) NOT NULL ,
    [photo_title] [varchar] ( 128 ) COLLATE Chinese_PRC_CI_AS NULL ,
    [photo_description] [text] COLLATE Chinese_PRC_CI_AS NULL ,
    [photo_category_id] [ int ] NULL ,
    [photo_path] [varchar] ( 255 ) COLLATE Chinese_PRC_CI_AS NULL 
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO

6.原代码下载
/Files/zm235/ajaxchangeimage.rar