Ajax 實作無重新整理切換圖檔

Html 源碼

<% ... @ Page language="c#" Codebehind="ajaxImage.aspx.cs" AutoEventWireup="false" Inherits="ajaxImage"  %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >

< HTML >

     < HEAD >

         < title > ajaxImage </ title >

         < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >

         < meta  content ="C#"  name ="CODE_LANGUAGE" >

         < meta  content ="JavaScript"  name ="vs_defaultClientScript" >

         < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >

         < Meta  http-equiv ="Page-Enter"  Content ="revealTrans(duration=0.3, transition=19)" >

         < link  href ="../../../images/zj258.css`"  rel ="stylesheet"  type ="text/css" >

         < style  type ="text/css" > ...  a:link {...}{text-decoration: none;color: #000000;}

    a:visited {...}{ text-decoration: none; color: #999999;}

    a:hover {...}{ text-decoration: underline; color: #0066CC;}

    a:active {...}{ text-decoration: none; color: #0066CC;}

    .12-22 {...}{font-size: 12px; line-height: 22px;}

         </ style >

         < script  language ="javascript"  type ="text/javascript" > ...

            // 定時器

            var timeDelay;            

            // 圖檔自動浏覽時的時間間隔

            var timeInterval = 10*1000;                        

            // Array對象,存儲圖檔檔案的路徑

            var image;    

            //phototitle對象,存儲圖檔的标題

            var phototitle;        

            // 目前顯示的圖檔序号            

            var num;            

            //目前顯示的圖檔的p_id

            var p_id;

            // 圖檔資訊資料表

            var dt;            

            // 預加載圖檔資訊

            function PreloadImage()

            ...{

                // 采用同步調用的方式擷取圖檔的資訊    AjaxMethod            

                var ds = lib.AjaxMethod.GetPhotoList().value;                

                // 如果傳回了結果

                if (ds)

                ...{

                    // 判斷資料表是否不為空

                    if (ds.Tables[0].Rows.length > 0)

                    ...{

                        // 傳回的圖檔資訊資料表

                        dt = ds.Tables[0];                        

                        // 用image對象存儲圖檔的檔案路徑

                        image = new Array();          

                        //用phototitle對象存儲圖檔的标題

                         phototitle=new Array();  

                        //用p_id對象存儲圖檔的p_id

                        p_id=new Array();            

                        // 圖檔在Photos目錄下

                        for (var i = 0; i < dt.Rows.length; i++)

                        ...{

                            var strPath=dt.Rows[i].p_images;

                            var strName=dt.Rows[i].p_name;

                            //var num=str.indexOf("~");                            

                            image[i] ="http://www.fzbj.net"+strPath.substr(1);//截取“~”後面的參數串  

                            phototitle[i]=strName;

                            p_id[i]=dt.Rows[i].p_id;

                        } 

                        // 初始化一些變量

                        num = -1;

                        //nStatus = 0x09;                        

                        // 加載第一張圖檔

                        next_image();

                    }

                    else // 分類下沒有圖檔

                    ...{

                        alert("該目錄下沒有圖檔！");

                    }

                }                

            }

            // 實作圖檔切換時的效果

            function image_effects()

            ...{

                // Transition的值為0~23之間的随機數,代表24種切換效果

                // 具體值與效果之間的對應見MSDN

                var ran=Math.random() * 23;

                document.slideShow1.filters.revealTrans.Transition =ran;

                document.slideShow2.filters.revealTrans.Transition =ran;

                document.slideShow3.filters.revealTrans.Transition =ran;

                document.slideShow4.filters.revealTrans.Transition =ran;

                // 應用并播放切換效果slideShow

                document.slideShow1.filters.revealTrans.apply();

                document.slideShow2.filters.revealTrans.apply();

                document.slideShow3.filters.revealTrans.apply();

                document.slideShow4.filters.revealTrans.apply();

                document.slideShow1.filters.revealTrans.play();

                document.slideShow2.filters.revealTrans.play();

                document.slideShow3.filters.revealTrans.play();

                document.slideShow4.filters.revealTrans.play();

            }

            function next_image()

            ...{

                // 目前圖檔的序号向後移動,如果已經是最後一張,

                // 則切換到第一張圖檔

                num++;

                num %= image.length;                

                // 圖檔的切換效果

                image_effects();                

                // 将<img>對象的src屬性設定為目前num對應的路徑

                // 切換圖檔的顯示和标題

                try

                ...{

                    document.slideShow1.src = image[num++];

                    document.getElementById("a1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow1.title=phototitle[num];                

                    document.getElementById("srctext1").title=phototitle[num];

                    document.getElementById("srctext1").innerText=phototitle[num].substring(0,7);

                    document.getElementById("srctext1").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow2.src = image[num++];

                    document.getElementById("a2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow2.title=phototitle[num];

                    document.getElementById("srctext2").title=phototitle[num];

                    document.getElementById("srctext2").innerText=phototitle[num].substring(0,7);

                    document.getElementById("srctext2").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow3.src = image[num++];

                    document.getElementById("a3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow3.title=phototitle[num];

                    document.getElementById("srctext3").title=phototitle[num];

                    document.getElementById("srctext3").innerText=phototitle[num].substring(0,7);                

                    document.getElementById("srctext3").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow4.src = image[num++];

                    document.getElementById("a4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                    document.slideShow4.title=phototitle[num];

                    document.getElementById("srctext4").title=phototitle[num];

                    document.getElementById("srctext4").innerText=phototitle[num].substring(0,7);

                    document.getElementById("srctext4").href="../../../gqxx/3chanpin_info"+p_id[num]+".aspx";

                }

                catch(e)

                ...{                    

                }

                //誰時間自動播放

                timeDelay = setTimeout( "next_image()",timeInterval );

            }

            function slideshow_automatic()

            ...{

                // 目前圖檔的序号向後移動,如果已經是最後一張,

                // 則切換到第一張圖檔

                num ++;

                num %= image.length;

                // 圖檔的切換效果

                image_effects();

                // 将<img>對象的src屬性設定為目前num對應的路徑

                // 切換圖檔的顯示和标題

                document.slideShow.src = image[num];           

                document.getElementById("srctext1").innerText=phototitle[num];           

            }

         </ script >

     </ HEAD >

     < body  onload ="PreloadImage()"  topMargin ="0" >

         < form  id ="Form1"  method ="post"  runat ="server" >

             < TABLE  id ="Table1"  class ="12-22"  cellSpacing ="0"  cellPadding ="0"  border ="0" >

                 < TR >

                     < TD >

                         < a  id ="a1"  name ="a1"  target =_blank >< IMG  class ="line-black"  style ="FILTER: revealTrans(duration=2,transition=23)"  id ="slideShow1"

                                width ="100"  border ="0"  name ="slideShow1"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/2006824/200682492055289_thumb.jpg" ></ a >

                     </ TD >

                     < TD  width ="38" >< FONT  face ="宋體" ></ FONT ></ TD >

                     < TD >

                         < a  id ="a2"  name ="a2"  target =_blank >< IMG  class ="line-black"  id ="slideShow2"  style ="FILTER: revealTrans(duration=2,transition=23)"

                                width ="100"  border ="0"  name ="slideShow2"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/2006926/200692615551250_thumb.jpg" ></ a >

                     </ TD >

                 </ TR >

                 < TR  class ="12-22" >

                     < TD  align ="center" >< FONT  face ="宋體" ></ FONT >< A  id ="srctext1"   target =_blank ></ A ></ TD >

                     < TD  width ="38" >< FONT  face ="宋體" ></ FONT ></ TD >

                     < TD  align ="center" >< FONT  face ="宋體" ></ FONT >< FONT  face ="宋體" ></ FONT >   < A  id ="srctext2"   target =_blank >

                         </ A >

                     </ TD >

                 </ TR >

                 < TR  class ="12-22" >

                     < TD >

                         < a  id ="a3"  name ="a3"   target =_blank >< IMG  class ="line-black"  style ="FILTER: revealTrans(duration=2,transition=23)"  id ="slideShow3"

                                width ="100"  border ="0"  name ="slideShow3"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691173436571_thumb.jpg" >

                         </ a >

                     </ TD >

                     < TD  width ="38" >< FONT  face ="宋體" ></ FONT ></ TD >

                     < TD >

                         < a  id ="a4"  name ="a4"   target =_blank >< IMG  class ="line-black"  style ="FILTER: revealTrans(duration=2,transition=23)"  id ="slideShow4"

                                width ="100"  border ="0"  name ="slideShow4"  height ="120"  src ="http://www.fzbj.net/upfile/enterprise/proimage/200691/200691172430774_thumb.jpg" >

                         </ a >

                     </ TD >

                 </ TR >

                 < TR  class ="12-22" >

                     < TD  align ="center" >< FONT  face ="宋體" ></ FONT >< FONT  face ="宋體" ></ FONT >   < A  id ="srctext3"   target =_blank >

                         </ A >

                     </ TD >

                     < TD  width ="38" >< FONT  face ="宋體" ></ FONT ></ TD >

                     < TD  align ="center" >< FONT  face ="宋體" ></ FONT >< FONT  face ="宋體" ></ FONT >   < a  id ="srctext4"  target =_blank >

                         </ a >

                     </ TD >

                 </ TR >

             </ TABLE >

         </ form >

     </ body >

</ HTML >

 背景代碼

using  System;

using  System.Collections;

using  System.ComponentModel;

using  System.Data;

using  System.Drawing;

using  System.Web;

using  System.Web.SessionState;

using  System.Web.UI;

using  System.Web.UI.WebControls;

using  System.Web.UI.HtmlControls;

using  lib;

namespace  Fzbj

... {

    /// <summary>

    /// ajaxImage 的摘要說明。

    /// </summary>

    public class ajaxImage : System.Web.UI.Page

    ...{

        private void Page_Load(object sender, System.EventArgs e)

        ...{

            // 在此處放置使用者代碼以初始化頁面

            AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxMethod));

        }

        Web 窗體設計器生成的代碼#region Web 窗體設計器生成的代碼

        override protected void OnInit(EventArgs e)

        ...{

            //

            // CODEGEN: 該調用是 ASP.NET Web 窗體設計器所必需的。

            //

            InitializeComponent();

            base.OnInit(e);

        }

        /// <summary>

        /// 設計器支援所需的方法 - 不要使用代碼編輯器修改

        /// 此方法的内容。

        /// </summary>

        private void InitializeComponent()

        ...{    

            this.Load += new System.EventHandler(this.Page_Load);

        }

        #endregion

    }

}

AjaxMethod.cs 資料通路 代碼

using  System;

using  System.Data;

using  System.Data.SqlClient;

namespace  lib

... {

    /// <summary>

    /// AjaxMethod 的摘要說明。

    /// </summary>

    public class AjaxMethod

    ...{

        public AjaxMethod()

        ...{            

        }

        public static string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnStr"].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        

    }

}

然後在 WebConfig 配置裡加入:

   < httpHandlers >

             < add  verb ="*"  path ="*.ashx"  type ="AjaxPro.AjaxHandlerFactory,AjaxPro"   />

      </ httpHandlers >  

效果圖：

實作圖檔的24種特效切換