使用ASP.NET AJAX實現幻燈片效果

TyperegisterNamespace(Demo);

DemoSlideShow=function()
{
    this_slides=new Array();
    this_delay=;
    this_currentIndex=;
    this_pause=false;
}

DemoSlideShowprototype=
{
    get_Slides:function()
    {
        return this_slides;
    }
    
    set_Slides:function(value)
    {
        this_slides=value;
    }
    
    get_Delay:function()
    {
        return this_delay;
    }
    
    set_Delay:function(value)
    {
        this_delay=value;
    }
    
    get_CurrentIndex:function()
    {
        return this_currentIndex;
    }
    
    set_CurrentIndex:function(value)
    {
        if(value<)
        {
            this_currentIndex=this_slideslength;
            return;
        }
        if(value>=this_slideslength)
        {
            this_currentIndex=;
        }
        else
        {
            this_currentIndex=value;
        }
    }
    
    get_IsPaused:function()
    {
        return this_pause;
    }
    
    set_IsPaused:function(value)
    {
        thispause=value;
    }
    
    Pause:function()
    {
        this_pause=true;
    }
    
    Play:function()
    {
        this_pause=false;
        windowsetTimeout(slideshowShowImage()
    thisget_Delay());
    }
    
    ShowFirst:function()
    {
        this_currentIndex=;
        thisShowImage();
    }
    
    ShowLast:function()
    {
        this_currentIndex=this_slideslength;
        thisShowImage();
    }
    
    ShowNext:function()
    {
        var newIndex=this_currentIndex +;
        thisset_CurrentIndex(newIndex);
        thisShowImage();
    }
    
    ShowPrevious:function()
    {
        var newIndex=this_currentIndex ;
        thisset_CurrentIndex(newIndex);
        thisShowImage();
    }
    
    ShowImage:function()
    {
        var img=$get(Image);
    if(imgstylevisibility==hidden) 
    { 
    imgstylevisibility=visible; 
    } 
        var slides=thisget_Slides();
        var curIndex=thisget_CurrentIndex();
        imgsrc=slides[curIndex];
        if(thisget_IsPaused()==false)
        {
            thisset_CurrentIndex(curIndex+);
            thisPlay();
        }
    }
}


DemoSlideShowregisterClass(DemoSlideShow);

var slideshow=new DemoSlideShow();

　　這段代碼的開頭部分注冊了一個名為Demo的命名空間 然後創建了一個名為SildeShow的類 在SildeShow類的構造函數內聲明了個成員變量 _slides變量是一個數組其內的元素就是圖片的URL _delay變量指明了圖片轉換的間隔時間單位是毫秒 _currentIndex變量保存的是當前圖片在_slides數組中的索引 最後_pause變量用來說明是否暫停幻燈片的顯示暫停就是true運行就是false

　在SlideShow類的prototype中定義了個屬性分別是SlidesDelayCurrentIndex和IsPause它們都有getter和setter 顧名思義我就不對這些屬性做過多的解釋了但是set_CurrentIndex()我要好好說明一下 這個屬性首先會檢查傳來的值 如果值超出了Slides數組的范圍那會它會根據條件進行判斷設置該值為或數組內元素總數減 其本質上就是讓幻燈片可以循環播放

　Pause()方法用於設置_pause變量為true 調用這個方法會使幻燈片暫停播放

　Play()方法用於啟動幻燈片 首先設置_pause變量為false然後調用window的setTimeout()方法 setTimeout()方法需要兩個參數分別是在指定的延遲時間後需要執行的代碼和延遲時間（單位毫秒） 在我們的這個例子中延遲時間就是get_Delay()屬性的值 需要調用的代碼就是ShowImage()方法

　ShowImage()方法是用來顯示圖片的 它用到了CurrentIndex屬性和Slides屬性 它從Slides數組中讀取一個圖片路徑並設置給img標簽的src屬性 注意Image是我們稍後將會增加的img標簽的ID 另外注意一下我們使用的$get()方法它相當於documentgetElementById()方法 Play()方法每被調用一次CurrentIndex屬性就會自加 用這種方法幻燈片就會不斷地循環顯示

　ShowFirst()ShowLast()ShowNext()和ShowPrevious()方法用於調整_currentIndex變量從而調用ShowImage()方法顯示相關的圖片

　寫完這個類後我們再用ASPNET AJAX的registerClass()方法來注冊這個類 最後聲明一個SlideShow類的全局變量


開發Web Form
　在Visual Studio中新建一個web form 確保頁中有ScriptManager控件 添加一個兩行一列的HTML表格 在第一行中添加一個<img>標簽在第二行中添加個HTML按鈕 完成後的web form如下圖所示

　　

像上圖所示那樣設置個按鈕的value屬性

　接下來選擇ScriptManager控件並設置它的EnablePageMethods屬性為true 然後像如下這樣添加JScriptjs文件的引用

　　

創建一個用來返回圖片URL的web method
　SlideShow類允許你使用Slides屬性來指定圖片數組 我們可以設置Slides屬性為一個固定的圖片鏈接數組 但是更合適的方法是動態地從服務端獲得圖片鏈接數組 這樣你就可以返回一個基於某些條件生成的圖片鏈接數組或者應付某些數據庫驅動的邏輯 為了實現這樣的功能我們來創建一個返回圖片鏈接數組的web method 這個web method將被客戶端的JavaScript調用

　轉到web form的後置代碼中增加如下所示的web method

[WebMethod]
public static string[] GetSlides()
{
    string[] slides = new string[];

    slides[] = images/slidejpg;
    slides[] = images/slidejpg;
    slides[] = images/slidejpg;
    slides[] = images/slidejpg;

    return slides;
}

　　GetSlides()是一個靜態方法並被標記了[WebMethod]屬性 它將返回一個圖片鏈接數組 為了方便我們在示例程序中是通過硬編碼得到數組的你可以將它改為從數據庫中取值

　　用JavaScript調用GetSlides()方法
　現在我們需要用客戶端的JavaScript來調用上面的web method即GetSlides()方法 轉換到HTML源視圖並在web form的<head>節點內添加一個<script>塊如下所示

<script type=text/javascript>
function pageLoad()
{
    var img=$get(Image); 
    imgstylevisibility=hidden; 
    PageMethodsGetSlides(OnSuccessOnErrorOnTimeOut);
}
        
function OnSuccess(result)
{
    slideshowset_Slides(result);
    slideshowset_Delay();
    slideshowPlay();
}
        
function OnError(result)
{
    alert(resultget_message());
}

function OnTimeOut(result)
{
    alert(result);
}
</script>
　這段腳本內包含一個pageLoad()方法只要web from在客戶端被加載AJAX框架就會自動地調用它 它非常像ASPNET裡的Page_Load事件在pageLoad()方法中首先隱藏了圖片 然後通過內置的PageMethods類的幫助調用了GetSlides()方法 在ASPNET AJAX中所有的執行都是異步的所以GetSlides()方法是有回調函數的並且其回調函數分別會在執行成功出錯或超時的時候被調用

　OnSuccess()函數接收一個通過GetSlides()方法返回的字符串數組為參數然後設置SlideShow類的Slides屬性 再往下是設置幻燈片的延遲時間為毫秒 最後它調用SlideShow類的Play()方法來開始運行幻燈片

OnError()和OnTimeOut()分別用於顯示錯誤信息

接下來像下面這樣修改button標記

<input id=Button  onclick=slideshowShowFirst() />
<input id=Button  onclick=slideshowShowPrevious() />
<input id=Button  onclick=slideshowPause()/>
<input id=Button  onclick=slideshowPlay()/>
<input id=Button  onclick=slideshowShowNext() />
<input id=Button  onclick=slideshowShowLast()/>
　你可以看到button的onclick事件分別調用對應的SlideShow類的方法

　就是這些東西很簡單吧 運行這個web form你就會在浏覽器中看到我們的幻燈片


作者Bipin Joshi
Emailx
　簡介Bipin Joshi是的管理員他是的發起人這個公司提供NET framwork的培訓和咨詢服務他在印度孟買為開發者提供培訓他也是微軟的MVP(ASPNet)和ASPInsiders的會員

From:http://tw.wingwit.com/Article/program/net/201311/12520.html