基于微软ASP.NET AJAX框架开发幻灯片播放网页(1)
一、简介 在公司网站中，我们经常需要一个基于Web幻灯片形式的机制来演示自己的（也可能是别人的）产品。当然，你可以使用普通的JavaScript来开发这样的幻灯片；但是，借助于ASP.
一、简介
在公司网站中，我们经常需要一个基于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) {
this._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() {
this._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();
精彩图集
精彩文章