欢迎进入.NET社区论坛,与200万技术人员互动交流 >>进入
原文地址:http://www.dotnetbips.com/articles/a8441143-3a24-40e6-a5dc-68cfdb8a065d.aspx
[原文源码下载]
[译者改后源码下载]
原文发布日期:2007.05.27
作者:Bipin Joshi
翻译:webabcd
介绍
一些公司经常会有在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();