TyperegisterNamespace(Demo);
DemoSlideShow=function()
{
this_slides=newArray();
this_delay=;
this_currentIndex=;
this_pause=false;
}
DemoSlideShowprototype=
{
get_Slides:function()
{
returnthis_slides;
}
set_Slides:function(value)
{
this_slides=value;
}
get_Delay:function()
{
returnthis_delay;
}
set_Delay:function(value)
{
this_delay=value;
}
get_CurrentIndex:function()
{
returnthis_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()
{
returnthis_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()
{
varnewIndex=this_currentIndex+;
thisset_CurrentIndex(newIndex);
thisShowImage();
}
ShowPrevious:function()
{
varnewIndex=this_currentIndex;
thisset_CurrentIndex(newIndex);
thisShowImage();
}
ShowImage:function()
{
varimg=$get(Image);
if(imgstylevisibility==hidden)
{
imgstylevisibility=visible;
}
varslides=thisget_Slides();
varcurIndex=thisget_CurrentIndex();
imgsrc=slides[curIndex];
if(thisget_IsPaused()==false)
{
thisset_CurrentIndex(curIndex+);
thisPlay();
}
}
}
DemoSlideShowregisterClass(DemoSlideShow);
varslideshow=newDemoSlideShow();
这段代码的开头部分注册了一个名为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]
publicstaticstring[]GetSlides()
{
string[]slides=newstring[];
slides[]=images/slidejpg;
slides[]=images/slidejpg;
slides[]=images/slidejpg;
slides[]=images/slidejpg;
returnslides;
}
GetSlides()是一个静态方法并被标记了[WebMethod]属性 它将返回一个图片链接数组 为了方便我们在示例程序中是通过硬编码得到数组的你可以将它改为从数据库中取值
用JavaScript调用GetSlides()方法
现在我们需要用客户端的JavaScript来调用上面的web method即GetSlides()方法 转换到HTML源视图并在web form的<head>节点内添加一个<script>块如下所示
<scripttype=text/javascript>
functionpageLoad()
{
varimg=$get(Image);
imgstylevisibility=hidden;
PageMethodsGetSlides(OnSuccessOnErrorOnTimeOut);
}
functionOnSuccess(result)
{
slideshowset_Slides(result);
slideshowset_Delay();
slideshowPlay();
}
functionOnError(result)
{
alert(resultget_message());
}
functionOnTimeOut(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标记
<inputid=Buttononclick=slideshowShowFirst()/>
<inputid=Buttononclick=slideshowShowPrevious()/>
<inputid=Buttononclick=slideshowPause()/>
<inputid=Buttononclick=slideshowPlay()/>
<inputid=Buttononclick=slideshowShowNext()/>
<inputid=Buttononclick=slideshowShowLast()/>
你可以看到button的onclick事件分别调用对应的SlideShow类的方法
就是这些东西很简单吧 运行这个web form你就会在浏览器中看到我们的幻灯片
作者Bipin Joshi
Emailx
简介Bipin Joshi是的管理员他是的发起人这个公司提供NET framwork的培训和咨询服务他在印度孟买为开发者提供培训他也是微软的MVP(ASPNet)和ASPInsiders的会员
