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

一、Ajax Method
using System;
using System.Data;
using System.Data.SqlClient;

namespace Ajax Image
{
    /**//// <summary>
    /// Ajax Method 的摘要说明。
    /// </summary>
    public class Ajax Method
    {
        public Ajax Method()
        {
        }
        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

        [Ajax Pro.Ajax Method]
        public static DataSet GetPhotoList( int iCategoryID )
        {
            string sql = "Select id,photo_path FROM Photo where photo_category_id=" + iCategoryID ;
            return GetDataSet( sql );
        }
        [Ajax Pro.Ajax Method]
        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
}

                        // 初始化一些变量
                        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="Ajax Pro.Ajax HandlerFactory,Ajax Pro" />
     </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

返回炫浪学院

上一篇：实现一个基于Ajax的调查程序下一篇：利用PHP＋JavaScript打造AJAX搜索窗