当前位置:甜馍馍地理信息网 >> 网站开发 >> .Net编程 >> 正文 >>  [阅读资讯:使用ASP.NET AJAX实现幻灯片效果]

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

[ 来源:互联网 | 时间:2007年09月14日 | 收藏本文 ] 【

 本文中,我将通过ASP.NET AJAX的page methods和客户端脚本扩展的帮助,来开发一个简单的幻灯片程序。 这个幻灯片可以由用户控制它的开始和暂停,默认情况下它会循环展示所有图片。 当然,用户也可以对幻灯片进行手动操作。

一些公司经常会有在web上机械地显示它们产品的图片(即幻灯片)的需求。 当然你可以使用Javascript来开发这个程序,但是如果使用ASP.NET AJAX的话会使你的工作变得非常简单。新建一个SlideShow类
 开发这个幻灯片程序之前,我们先来新建一个启用了AJAX功能的web site。 然后添加一个名为Jscript.js的Javascript,在该文件内创建一个名为SildeShow的类,它的工作就是控制幻灯片的开始、停止和导航。 我们借助了ASP.NET AJAX的客户端脚本扩展的帮助来开发这个类,其代码如下:

使用ASP.NET AJAX实现幻灯片效果(图一)Type.registerNamespace("Demo");
使用ASP.NET AJAX实现幻灯片效果(图一)
使用ASP.NET AJAX实现幻灯片效果(图一)Demo.SlideShow=function()
使用ASP.NET AJAX实现幻灯片效果(图二)使用ASP.NET AJAX实现幻灯片效果(图三)使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)    this._slides=new Array();
使用ASP.NET AJAX实现幻灯片效果(图五)    this._delay=2000;
使用ASP.NET AJAX实现幻灯片效果(图五)    this._currentIndex=0;
使用ASP.NET AJAX实现幻灯片效果(图五)    this._pause=false;
使用ASP.NET AJAX实现幻灯片效果(图六)}
使用ASP.NET AJAX实现幻灯片效果(图一)
使用ASP.NET AJAX实现幻灯片效果(图一)Demo.SlideShow.prototype=
使用ASP.NET AJAX实现幻灯片效果(图二)使用ASP.NET AJAX实现幻灯片效果(图三)使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)    get_Slides:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        return this._slides;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    set_Slides:function(value)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this._slides=value;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    get_Delay:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        return this._delay;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    set_Delay:function(value)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this._delay=value;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    get_CurrentIndex:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        return this._currentIndex;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    set_CurrentIndex:function(value)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        if(value<0)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)        使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)            this._currentIndex=this._slides.length-1;
使用ASP.NET AJAX实现幻灯片效果(图五)            return;
使用ASP.NET AJAX实现幻灯片效果(图九)        }
使用ASP.NET AJAX实现幻灯片效果(图五)        if(value>=this._slides.length)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)        使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)            this._currentIndex=0;
使用ASP.NET AJAX实现幻灯片效果(图九)        }
使用ASP.NET AJAX实现幻灯片效果(图五)        else
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)        使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)            this._currentIndex=value;
使用ASP.NET AJAX实现幻灯片效果(图九)        }
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    get_IsPaused:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        return this._pause;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    set_IsPaused:function(value)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this.pause=value;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    Pause:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this._pause=true;
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    Play:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this._pause=false;
使用ASP.NET AJAX实现幻灯片效果(图五)        window.setTimeout("slideshow.ShowImage()",
使用ASP.NET AJAX实现幻灯片效果(图五)    this.get_Delay());
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    ShowFirst:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this._currentIndex=0;
使用ASP.NET AJAX实现幻灯片效果(图五)        this.ShowImage();
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    ShowLast:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        this._currentIndex=this._slides.length-1;
使用ASP.NET AJAX实现幻灯片效果(图五)        this.ShowImage();
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    ShowNext:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        var newIndex=this._currentIndex +1;
使用ASP.NET AJAX实现幻灯片效果(图五)        this.set_CurrentIndex(newIndex);
使用ASP.NET AJAX实现幻灯片效果(图五)        this.ShowImage();
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    ShowPrevious:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        var newIndex=this._currentIndex -1;
使用ASP.NET AJAX实现幻灯片效果(图五)        this.set_CurrentIndex(newIndex);
使用ASP.NET AJAX实现幻灯片效果(图五)        this.ShowImage();
使用ASP.NET AJAX实现幻灯片效果(图九)    },
使用ASP.NET AJAX实现幻灯片效果(图五)    
使用ASP.NET AJAX实现幻灯片效果(图五)    ShowImage:function()
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)        var img=$get("Image1");
使用ASP.NET AJAX实现幻灯片效果(图五)    if(img.style.visibility=="hidden") 
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)    使用ASP.NET AJAX实现幻灯片效果(图四)
使用ASP.NET AJAX实现幻灯片效果(图五)    img.style.visibility="visible"; 
使用ASP.NET AJAX实现幻灯片效果(图九)    } 
使用ASP.NET AJAX实现幻灯片效果(图五)        var slides=this.get_Slides();
使用ASP.NET AJAX实现幻灯片效果(图五)        var curIndex=this.get_CurrentIndex();
使用ASP.NET AJAX实现幻灯片效果(图五)        img.src=slides[curIndex];
使用ASP.NET AJAX实现幻灯片效果(图五)        if(this.get_IsPaused()==false)
使用ASP.NET AJAX实现幻灯片效果(图七)使用ASP.NET AJAX实现幻灯片效果(图八)        使用ASP.NET AJAX实现幻灯片效果(图四){
使用ASP.NET AJAX实现幻灯片效果(图五)            this.set_CurrentIndex(curIndex+1);
使用ASP.NET AJAX实现幻灯片效果(图五)            this.Play();
使用ASP.NET AJAX实现幻灯片效果(图九)        }
使用ASP.NET AJAX实现幻灯片效果(图九)    }
使用ASP.NET AJAX实现幻灯片效果(图六)}
使用ASP.NET AJAX实现幻灯片效果(图一)
使用ASP.NET AJAX实现幻灯片效果(图一)
使用ASP.NET AJAX实现幻灯片效果(图一)Demo.SlideShow.registerClass("Demo.SlideShow");
使用ASP.NET AJAX实现幻灯片效果(图一)
使用ASP.NET AJAX实现幻灯片效果(图一)var slideshow=new Demo.SlideShow();

下一页
本文共 3 页,第  [1]  [2]  [3]  页

【推荐本文】 【打印本页】 【返回顶部

>> 相关文章:

● 上一篇文章:ASP.NET中实现直接从网页上下载文件
● 下一篇文章:ASP.NET技术获取IP与MAC地址的方法
最新文章
推荐文章