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";

    }

}

< 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 >

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

    GetDataSet#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);

    }

    

}

<? 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 >

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