使用ASP.NET AJAX实现幻灯片效果

p;          this.Play();
        }
    }
}


Demo.SlideShow.registerClass("Demo.SlideShow");

var slideshow=new Demo.SlideShow();

 

　这段代码的开头部分注册了一个名为Demo的命名空间。 然后创建了一个名为SildeShow的类。 在SildeShow类的构造函数内声明了4个成员变量。 _slides变量是一个数组，其内的元素就是图片的URL。 _delay变量指明了图片转换的间隔时间，单位是毫秒。 _currentIndex变量保存的是当前图片在_slides数组中的索引。 最后，_pause变量用来说明是否暂停幻灯片的显示，暂停就是true，运行就是false。

　在SlideShow类的prototype中定义了4个属性，分别是Slides、Delay、CurrentIndex和IsPause，它们都有getter和setter。 顾名思义，我就不对这些属性做过多的解释了，但是set_CurrentIndex()我要好好说明一下。 这个属性首先会检查传来的值。 如果值超出了Slides数组的范围，那会它会根据条件进行判断，设置该值为“0”或数组内元素总数减1。 其本质上就是让幻灯片可以循环播放。

　Pause()方法用于设置_pause变量为true。 调用这个方法会使幻灯片暂停播放。

　Play()方法用于启动幻灯片。 首先设置_pause变量为false，然后调用window的setTimeout()方法。 setTimeout()方法需要两个参数，分别是在指定的延迟时间后需要执行的代码和延迟时间（单位：毫秒）。 在我们的这个例子中，延迟时间就是get_Delay()属性的值。 需要调用的代码就是ShowImage()方法。

　ShowImage()方法是用来显示图片的。 它用到了CurrentIndex属性和Slides属性。 它从Slides数组中读取一个图片路径，并设置给img标签的src属性。 注意，“Image1”是我们稍后将会增加的img标签的ID。 另外，注意一下我们使用的$get()方法，它相当于document.getElementById()方法。 Play()方法每被调用一次，CurrentIndex属性就会自加1。 用这种方法，幻灯片就会不断地循环显示。

　ShowFirst()，ShowLast()，ShowNext()和ShowPrevious()方法用于调整_currentIndex变量，从而调用ShowImage()方法显示相关的图片。

　写完这个类后，我们再用ASP.NET AJAX的registerClass()方法来注册这个类。 最后，声明一个SlideShow类的全局变量。


开发Web Form
　在Visual Studio中新建一个web form。 确保页中有ScriptManager控件。 添加一个两行一列的HTML表格。 在第一行中添加一个<img>标签，在第二行中添加6个HTML按钮。 完成后的web form如下图所示：

像上图所示那样设置6个按钮的value属性。

　接下来，选择ScriptManager控件，并设置它的EnablePageMethods属性为true。 然后，像如下这样添加JScript.js文件的引用。

创建一个用来返回图片URL的web method
　SlideShow类允许你使用Slides属性来指定图片数组。 我们可以设置Slides属性为一个固定的图片链接数组。 但是，更合适的方法是动态地从服务端获得图片链接数组。 这样你就可以返回一个基于某些条件生成的图片链接数组，或者应付某些数据库驱动的逻辑。 为了实现这样的功能，我们来创建一个返回图片链接数组的web method。 这个web method将被客户端的JavaScript调用。

　转到web form的后置代码中，增加如下所示的web method。
[WebMethod]
public static string GetSlides()
{
    string slides = new string;

    slides[0] = "images/slide1.jpg";
    slides = "images/slide2.jpg";
    slides = "images/slid