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

一、AjaxMethod

using  System;
using  System.Data;
using  System.Data.SqlClient;

namespace  AjaxImage
{
    /**//// <summary>
    /// AjaxMethod 的摘要说明。
    /// </summary>
    public class AjaxMethod
    {
        public AjaxMethod()
        {            
        }
        public static string ConnectionString = System.Configuration.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

        [AjaxPro.AjaxMethod]
        public static DataSet GetPhotoList( int iCategoryID )
        {
            string sql = "Select id,photo_path FROM Photo where photo_category_id=" + iCategoryID ;
            return GetDataSet( sql );
        }
        [AjaxPro.AjaxMethod]
        public static DataSet GetPhotoInfo( int id )
        {
            string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);
            return GetDataSet( sql );
        }

    }//end class
}

二、页面HTML代码：

< div  id ="Layer1"  style ="Z-INDEX:1; LEFT:104px; WIDTH:501px; POSITION:absolute; TOP:28px; HEIGHT:345px" >
                 < img  name ="slideShow"  src ="images/space.gif"  width ="500"  height ="300"  style ="FILTER:revealTrans(duration=2,transition=23)" >
             </ div >
             < div  id ="Layer2"  style ="Z-INDEX:2; LEFT:490px; WIDTH:112px; POSITION:absolute; TOP:380px; HEIGHT:26px" >
                 < img  id ="btnPlay"  src ="images/play_bw.gif"  onclick ="slideshow_automatic()"  onmouseover ="this.src='images/play.gif'"
                    onmouseout ="this.src='images/play_bw.gif'" >   < img  id ="btnPause"  src ="images/pause_bw.gif"  onclick ="pauseSlideShow()"  onmouseover ="this.src='images/pause.gif'"
                    onmouseout ="this.src='images/pause_bw.gif'" >   < img  id ="btnPrev"  src ="images/prev_bw.gif"  onclick ="previous_image()"  onmouseover ="this.src='images/prev.gif'"
                    onmouseout ="this.src='images/prev_bw.gif'" >   < img  id ="btnNext"  src ="images/next_bw.gif"  onclick ="next_image()"  onmouseover ="this.src='images/next.gif';next_image()"
                    onmouseout ="this.src='images/next_bw.gif'" >
             </ div >

三、JAVASCRIPT:

< script language = " javascript "  type = " text/javascript " >
             //  定时器
             var  timeDelay;
            
             //  图片自动浏览时的时间间隔
             var  timeInterval  =   4000 ;
            
             //  Array对象,存储图片文件的路径
             var  image;
            
             //  当前显示的图片序号
             var  num;
            
             //  图片信息数据表
             var  dt;
             //  预加载图片信息
             function  PreloadImage(iCategoryID)
             {
                // 采用同步调用的方式获取图片的信息                
                var ds = AjaxImage.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[i] = "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
                document.slideShow.filters.revealTrans.Transition = Math.random() * 23;
                
                // 应用并播放切换效果
                document.slideShow.filters.revealTrans.apply();
                document.slideShow.filters.revealTrans.play();
            }
             function  next_image()
             {
                // 当前图片的序号向后移动,如果已经是最后一张,
                // 则切换到第一张图片
                num++;
                num %= image.length;
                
                // 图片的切换效果
                image_effects();
                
                // 将<img>对象的src属性设置为当前num对应的路径
                // 切换图片的显示
                document.slideShow.src = image[num];                
            }
             function  previous_image()
             {
                // 当前图片的序号向后移动,如果已经是最后一张,
                // 则切换到第一张图片
                num += image.length - 1;
                num %= image.length;
                
                // 图片的切换效果
                image_effects();
                
                // 将<img>对象的src属性设置为当前num对应的路径
                // 切换图片的显示
                document.slideShow.src = image[num];                                
            
            }
             function  slideshow_automatic()
             {
                // 当前图片的序号向后移动,如果已经是最后一张,
                // 则切换到第一张图片
                num ++;
                num %= image.length;
                
                // 图片的切换效果
                image_effects();
                
                // 将<img>对象的src属性设置为当前num对应的路径
                // 切换图片的显示
                document.slideShow.src = image[num];
                timeDelay = setTimeout( "slideshow_automatic()",timeInterval );                
            }
             //  停止自动播放
             function  pauseSlideShow()
             {
                // 清除定时器,不再执行slideshow_automatic函数
                clearTimeout(timeDelay);
            }
         </ script >

四、在主页面的ONLOAD事件里面添加：

      onload="PreloadImage('2')"

五、WebConfig添加:
       <system.web>
       <httpHandlers>
            <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro" />
     </httpHandlers>

      <configuration>
       <appSettings>
           <add key="ConnectionString" value="server=127.0.0.1;database=test;uid=sa;pwd=dfdf" /> 
       </appSettings>   
六、数据库脚本:
      

CREATE   TABLE   [ 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