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

欢迎进入.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();