【IT168 技术文档】

    一些公司经常会有在web上机械地显示它们产品的图片（即幻灯片）的需求。 当然你可以使用JavaScript来开发这个程序，但是如果使用ASP.NET AJAX的话会使你的工作变得非常简单。 本文中，我将通过ASP.NET AJAX的page methods和客户端脚本扩展的帮助，来开发一个简单的幻灯片程序。 这个幻灯片可以由用户控制它的开始和暂停，默认情况下它会循环展示所有图片。 当然，用户也可以对幻灯片进行手动操作。

    新建一个SlideShow类

    开发这个幻灯片程序之前，我们先来新建一个启用了AJAX功能的web site。 然后添加一个名为JScript.js的JavaScript，在该文件内创建一个名为SildeShow的类，它的工作就是控制幻灯片的开始、停止和导航。 我们借助了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");
var slideshow=new Demo.SlideShow();