知识大全使用ASP.NET AJAX实现幻灯片效果

Posted 2022-07-17 知

篇首语：自由的生活方式是借知识和洞察获得的。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全使用ASP.NET AJAX实现幻灯片效果相关的知识，希望对你有一定的参考价值。

使用ASP.NET AJAX实现幻灯片效果 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

Type registerNamespace( Demo );Demo SlideShow=function() this _slides=new Array(); this _delay= ; this _currentIndex= ; 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< ) this _currentIndex=this _slides length ; return; if(value>=this _slides length) this _currentIndex= ; 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= ; this ShowImage(); ShowLast:function() this _currentIndex=this _slides length ; this ShowImage(); ShowNext:function() var newIndex=this _currentIndex + ; this set_CurrentIndex(newIndex); this ShowImage(); ShowPrevious:function() var newIndex=this _currentIndex ; this set_CurrentIndex(newIndex); this ShowImage(); ShowImage:function() var img=$get( Image ); 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+ ); this Play(); Demo SlideShow registerClass( Demo SlideShow );var slideshow=new Demo SlideShow();

　　这段代码的开头部分注册了一个名为Demo的命名空间然后创建了一个名为SildeShow的类在SildeShow类的构造函数内声明了个成员变量 _slides变量是一个数组其内的元素就是图片的URL _delay变量指明了图片转换的间隔时间单位是毫秒 _currentIndex变量保存的是当前图片在_slides数组中的索引最后 _pause变量用来说明是否暂停幻灯片的显示暂停就是true 运行就是false 　在SlideShow类的prototype中定义了个属性分别是Slides Delay CurrentIndex和IsPause 它们都有getter和setter 顾名思义我就不对这些属性做过多的解释了但是set_CurrentIndex()我要好好说明一下这个属性首先会检查传来的值如果值超出了Slides数组的范围那会它会根据条件进行判断设置该值为或数组内元素总数减其本质上就是让幻灯片可以循环播放　Pause()方法用于设置_pause变量为true 调用这个方法会使幻灯片暂停播放　Play()方法用于启动幻灯片首先设置_pause变量为false 然后调用window的setTimeout()方法 setTimeout()方法需要两个参数分别是在指定的延迟时间后需要执行的代码和延迟时间（单位毫秒）在我们的这个例子中延迟时间就是get_Delay()属性的值需要调用的代码就是ShowImage()方法　ShowImage()方法是用来显示图片的它用到了CurrentIndex属性和Slides属性它从Slides数组中读取一个图片路径并设置给img标签的src属性注意 Image 是我们稍后将会增加的img标签的ID 另外注意一下我们使用的$get()方法它相当于document getElementById()方法 Play()方法每被调用一次 CurrentIndex属性就会自加用这种方法幻灯片就会不断地循环显示　ShowFirst() ShowLast() ShowNext()和ShowPrevious()方法用于调整_currentIndex变量从而调用ShowImage()方法显示相关的图片　写完这个类后我们再用ASP NET AJAX的registerClass()方法来注册这个类最后声明一个SlideShow类的全局变量 开发Web Form　在Visual Studio中新建一个web form 确保页中有ScriptManager控件添加一个两行一列的HTML表格在第一行中添加一个<img>标签在第二行中添加个HTML按钮完成后的web form如下图所示

像上图所示那样设置个按钮的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[ ] = images/slide jpg ; slides[ ] = images/slide jpg ; slides[ ] = images/slide jpg ; slides[ ] = images/slide jpg ; return slides;

　　GetSlides()是一个静态方法并被标记了[WebMethod]属性它将返回一个图片链接数组为了方便我们在示例程序中是通过硬编码得到数组的你可以将它改为从数据库中取值

　　用JavaScript调用GetSlides()方法　现在我们需要用客户端的JavaScript来调用上面的web method 即GetSlides()方法转换到HTML源视图并在web form的<head>节点内添加一个<script>块如下所示

知识大全 使用ASP.NET AJAX实现幻灯片效果

知识大全使用ASP.NET AJAX实现幻灯片效果