ASP.NET创建SlideShow类-创建asp.net mvc项目

一、简介

在公司网站中，我们经常需要一个基于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(); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.

在代码的最开始，我们先注册一个称为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类

【编辑推荐】