Ajax無重新整理實作圖檔切換特效(AjaxPro)

一、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="/XrssFile/2007-11/15/20071115111221724.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="/XrssFile/2007-11/15/20071115111221927.gif" οnclick="slideshow_automatic()" οnmοuseοver="this.src='/XrssFile/2007-11/15/20071115111221504.gif'"

                    οnmοuseοut="this.src=/XrssFile/2007-11/15/20071115111221633.gif'"> <img id="btnPause" src="/XrssFile/2007-11/15/20071115111221183.gif" οnclick="pauseSlideShow()" οnmοuseοver="this.src='/XrssFile/2007-11/15/20071115111221696.gif'"

                    οnmοuseοut="this.src=/XrssFile/2007-11/15/20071115111221656.gif'"> <img id="btnPrev" src="/XrssFile/2007-11/15/20071115111222626.gif" οnclick="previous_image()" οnmοuseοver="this.src='/XrssFile/2007-11/15/20071115111222104.gif'"

                    οnmοuseοut="this.src=/XrssFile/2007-11/15/20071115111222771.gif'"> <img id="btnNext" src="/XrssFile/2007-11/15/20071115111222267.gif" οnclick="next_image()" οnmοuseοver="this.src='/XrssFile/2007-11/15/20071115111222647.gif';next_image()"

                    οnmοuseοut="this.src='/XrssFile/2007-11/15/20071115111222891.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事件裡面添加：

      οnlοad="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]