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

一、AjaxMethodusing System;using System.Data;using System.Data.SqlClient;

namespace AjaxImage{    /**////     /// AjaxMethod 的摘要说明。    ///     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代码：                                                                    三、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();                                // 将对象的src属性设置为当前num对应的路径                // 切换图片的显示                document.slideShow.src = image[num];                            }            function previous_image()            {                // 当前图片的序号向后移动,如果已经是最后一张,                // 则切换到第一张图片                num += image.length – 1;                num %= image.length;                                // 图片的切换效果                image_effects();                                // 将对象的src属性设置为当前num对应的路径                // 切换图片的显示                document.slideShow.src = image[num];                                                        }            function slideshow_automatic()            {                // 当前图片的序号向后移动,如果已经是最后一张,                // 则切换到第一张图片                num ++;                num %= image.length;                                // 图片的切换效果                image_effects();                                // 将对象的src属性设置为当前num对应的路径                // 切换图片的显示                document.slideShow.src = image[num];                timeDelay = setTimeout( “slideshow_automatic()”,timeInterval );                            }            // 停止自动播放            function pauseSlideShow()            {                // 清除定时器,不再执行slideshow_automatic函数                clearTimeout(timeDelay);            }        四、在主页面的ONLOAD事件里面添加：

      onload=”PreloadImage(2)”

五、WebConfig添加:                              

                                   六、数据库脚本:       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]GOhttp://www.cnblogs.com/wander/archive/2006/09/19/508648.html