ASP.NET創(chuàng)建SlideShow類
一、簡介
在公司網(wǎng)站中，我們經(jīng)常需要一個基于Web幻燈片形式的機制來演示自己的（也可能是別人的）產(chǎn)品。當然，你可以使用普通的JavaScript來開發(fā)這樣的幻燈片；但是，借助于ASP.NET AJAX框架，這一開發(fā)工作將得到極大簡化。在本文示例中，我們正是想將借助于Web頁面方法和客戶端腳本擴展技術開發(fā)這樣一個簡單的幻燈片。終端用戶可以播放和暫停幻燈片，也可以進行循環(huán)播放，還可以手工控制.
二、創(chuàng)建一個ASP.NET AJAX-Enabled網(wǎng)站
啟動Visual Studio 2005，然后選擇菜單項“文件|新建網(wǎng)站…”，使用模板“ASP.NET AJAX-Enabled網(wǎng)站”創(chuàng)建一個新的網(wǎng)站，并命名工程為SlideShow（選擇Visual C#作為內(nèi)置語言）。此后，系統(tǒng)應該自動地添加對必要的程序集—System.Web.Extension.dll的參考。此外，你會注意到一個ScriptManager服務器控件自動地添加到頁面中。注意，這個服務器控件作為整個ASP.NET AJAX框架的控制中心。
然后，添加一個具有兩行和一列的HTML表格，再在第一行添加一個＜img＞標簽，在第二行添加六個HTML按鈕控件。下圖1展示web表單Default.aspx的大致布局。
三、創(chuàng)建SlideShow類
右單擊工程添加一個新的java腳本文件，并命名為JScript.js。在此，我們將創(chuàng)建SlideShow類，它將負責完成所有的幻燈片操作任務—例如播放、暫住和導航幻燈片。注意，這個SlideShow類的開發(fā)是基于ASP.NET AJAX客戶端腳本擴展技術，具體實現(xiàn)代碼如下所示：
- Type.registerNamespace("Demo");
- //構造函數(shù)及私有變量聲明
- 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");
- //創(chuàng)建全局SlideShow類的實例
- var slideshow=new Demo.SlideShow();
在代碼的最開始，我們先注冊一個稱為Demo的新的命名空間。然后，創(chuàng)建SlideShow類。該SlideShow類的構造器共聲明了四個私有成員變量。其中，_slides變量指向一個包含幻燈片圖像URL的數(shù)組；_delay變量指示兩張相鄰的幻燈片播放的間隔時間（單位為毫秒）；_currentIndex變量存儲了當前幻燈片在_slides數(shù)組中的索引值；最后，_pause變量指示幻燈片被暫停(true)還是處于運行態(tài)(false)。
接下來，在SlideShow類的原型中，我們定義了與前面的四個屬性相關聯(lián)的getter/setter方法，也就是Slides、Delay、CurrentIndex和 IsPaused。其它方法都比較基本，因此我們僅介紹方法set_CurrentIndex()。這個set_CurrentIndex()屬性方法負責檢查提供給它的索引值。如果該值超出slides數(shù)組上下標邊界，那么，它會把這個值調(diào)整到0或數(shù)組的長度減1（根據(jù)具體情況而定）。這是很關鍵的，這樣以來，幻燈片就可以進行循環(huán)播放。
接下來，Pause()方法簡單地把成員變量_pause設置為true—這可以控制幻燈片如何暫停。
Play()方法負責播放幻燈片。它首先設置_pause變量為false，然后調(diào)用JavaScript 對象windows的setTimeout()方法。該setTimeout()方法接受兩個參數(shù)：在經(jīng)過特定時間延遲后要執(zhí)行的代碼；在此代碼執(zhí)行完后對應的時間跨度（單位為毫秒）。在本例中，這個延遲值來自于get_Delay()屬性。在此，該setTimeout()方法將調(diào)用 ShowImage()方法。
ShowImage()方法負責執(zhí)行顯示一個圖像的核心工作。它引用了CurrentIndex和Slides兩個屬性，然后把圖像標簽的src屬性設置為Slides數(shù)組中對應的適當?shù)膱D像。注意，Image1是一個圖像標簽的ID—我們將在后面添加它。此外，還應注意$get()方法的用法，它等價于document.getElementById()方法。然后，CurrentIndex的值加１并且再次調(diào)用Play()方法。這樣以來，將形成一個無限循環(huán)，而幻燈片將持續(xù)不斷地播放下去。
最后的四個方法—ShowFirst()，ShowLast()，ShowNext()和ShowPrevious()方法只是簡單地調(diào)整_currentIndex成員變量的值，并調(diào)用ShowImage()方法來顯示一張幻燈片。
在創(chuàng)建類結束后，我們使用registerClass()方法把它注冊到MS AJAX框架。最后，聲明一個SlideShow類的全局實例變量。
最后打開Web頁面Default.aspx，選擇ScriptManager控件，并且設置它的EnablePageMethods屬性為true，而且還要把JScript.js文件添加到它的腳本集合中。以上介紹創(chuàng)建SlideShow類
【編輯推薦】
