Ajax無刷新實現圖片切換特效

2019-11-18 16:58:59

字體：大中小

來源：轉載

供稿：網友

一、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
http://www.49028c.com/wander/archive/2006/09/19/508648.html