一、簡介

在公司網站中，我們經常需要一個基于Web幻燈片形式的機制來演示自己的（也可能是別人的）產品。當然，你可以使用普通的JavaScript來開發這樣的幻燈片；但是，借助于ASP.NET AJAX框架，這一開發工作將得到極大簡化。在本文示例中，我們正是想將借助于Web頁面方法和客戶端腳本擴展技術開發這樣一個簡單的幻燈片。終端用戶可以播放和暫停幻燈片，也可以進行循環播放，還可以手工控制.

二、創建一個ASP.NET AJAX-Enabled網站

啟動Visual Studio 2005，然后選擇菜單項“文件|新建網站…”，使用模板“ASP.NET AJAX-Enabled網站”創建一個新的網站，并命名工程為SlideShow（選擇Visual C#作為內置語言）。此后，系統應該自動地添加對必要的程序集—System.Web.Extension.dll的參考。此外，你會注意到一個ScriptManager服務器控件自動地添加到頁面中。注意，這個服務器控件作為整個ASP.NET AJAX框架的控制中心。

然后，添加一個具有兩行和一列的HTML表格，再在第一行添加一個＜img＞標簽，在第二行添加六個HTML按鈕控件。下圖1展示web表單Default.aspx的大致布局。

三、創建SlideShow類

右單擊工程添加一個新的java腳本文件，并命名為JScript.js。在此，我們將創建SlideShow類，它將負責完成所有的幻燈片操作任務—例如播放、暫住和導航幻燈片。注意，這個SlideShow類的開發是基于ASP.NET AJAX客戶端腳本擴展技術，具體實現代碼如下所示：

Type.registerNamespace("Demo");  
//構造函數及私有變量聲明   
Demo.SlideShow=function(){  
this._slides=new Array();  
this._delay=2000;  
this._currentIndex=0;  
this._pause=false;  
}  
//原型定義部分   
Demo.SlideShow.prototype=  
{  
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＜0) {  
thisthis._currentIndex=this._slides.length-1;  
return;  
}  
if(value＞=this._slides.length) {  
this._currentIndex=0;  
}  
else{  
this._currentIndex=value;  
}  
}，  
get_IsPaused:function() {  
return this._pause;  
}，  
set_IsPaused:function(value) {  
this.pause=value;  
}，  
Pause:function() {  
this._pause=true;  
}，  
Play:function() {  
this._pause=false;  
window.setTimeout("slideshow.ShowImage()"，  
this.get_Delay());  
}，  
ShowFirst:function() {  
this._currentIndex=0;  
this.ShowImage();  
}，  
ShowLast:function() {  
thisthis._currentIndex=this._slides.length-1;  
this.ShowImage();  
}，  
ShowNext:function() {  
var newIndex=this._currentIndex +1;  
this.set_CurrentIndex(newIndex);  
this.ShowImage();  
}，  
ShowPrevious:function()  
{  
var newIndex=this._currentIndex -1;  
this.set_CurrentIndex(newIndex);  
this.ShowImage();  
}，  
ShowImage:function() {  
var img=$get("Image1");  
if(img.style.visibility=="hidden") {  
img.style.visibility="visible";  
}  
var slides=this.get_Slides();  
var curIndex=this.get_CurrentIndex();  
img.src=slides[curIndex];  
if(this.get_IsPaused()==false)  
{  
this.set_CurrentIndex(curIndex+1);  
this.Play();  
}  
}  
}  
//注冊類   
Demo.SlideShow.registerClass("Demo.SlideShow");  
//創建全局SlideShow類的實例   
var slideshow=new Demo.SlideShow(); 

在代碼的最開始，我們先注冊一個稱為Demo的新的命名空間。然后，創建SlideShow類。該SlideShow類的構造器共聲明了四個私有成員變量。其中，_slides變量指向一個包含幻燈片圖像URL的數組；_delay變量指示兩張相鄰的幻燈片播放的間隔時間（單位為毫秒）；_currentIndex變量存儲了當前幻燈片在_slides數組中的索引值；最后，_pause變量指示幻燈片被暫停(true)還是處于運行態(false)。

接下來，在SlideShow類的原型中，我們定義了與前面的四個屬性相關聯的getter/setter方法，也就是Slides、Delay、CurrentIndex和 IsPaused。其它方法都比較基本，因此我們僅介紹方法set_CurrentIndex()。這個set_CurrentIndex()屬性方法負責檢查提供給它的索引值。如果該值超出slides數組上下標邊界，那么，它會把這個值調整到0或數組的長度減1（根據具體情況而定）。這是很關鍵的，這樣以來，幻燈片就可以進行循環播放。

接下來，Pause()方法簡單地把成員變量_pause設置為true—這可以控制幻燈片如何暫停。
Play()方法負責播放幻燈片。它首先設置_pause變量為false，然后調用JavaScript 對象windows的setTimeout()方法。該setTimeout()方法接受兩個參數：在經過特定時間延遲后要執行的代碼；在此代碼執行完后對應的時間跨度（單位為毫秒）。在本例中，這個延遲值來自于get_Delay()屬性。在此，該setTimeout()方法將調用 ShowImage()方法。

ShowImage()方法負責執行顯示一個圖像的核心工作。它引用了CurrentIndex和Slides兩個屬性，然后把圖像標簽的src屬性設置為Slides數組中對應的適當的圖像。注意，Image1是一個圖像標簽的ID—我們將在后面添加它。此外，還應注意$get()方法的用法，它等價于document.getElementById()方法。然后，CurrentIndex的值加１并且再次調用Play()方法。這樣以來，將形成一個無限循環，而幻燈片將持續不斷地播放下去。

最后的四個方法—ShowFirst()，ShowLast()，ShowNext()和ShowPrevious()方法只是簡單地調整_currentIndex成員變量的值，并調用ShowImage()方法來顯示一張幻燈片。

在創建類結束后，我們使用registerClass()方法把它注冊到MS AJAX框架。最后，聲明一個SlideShow類的全局實例變量。

最后打開Web頁面Default.aspx，選擇ScriptManager控件，并且設置它的EnablePageMethods屬性為true，而且還要把JScript.js文件添加到它的腳本集合中。以上介紹創建SlideShow類

【編輯推薦】

1. 淺析ASP.NET Web 安全性
2. ASP.NET的Session State
3. 淺析IsPostBack屬性ASP.NET
4. ASP.NET構架與安全機制
5. 概述ASP.NET水晶報表