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

清疚 2022-10-02 14:49 134阅读 0赞

(1)html  
  
<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="Photo.aspx.cs" Inherits="Photo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >  
<head runat="server">  
<title></title>  
<script type="text/javascript">  
function pageLoad()  
\{  
var img=$get("Image1");  
img.style.visibility="hidden";  
PageMethods.GetSlides(OnSuccess,OnError,OnTimeOut);  
\}  
  
function OnSuccess(result)  
\{  
slideshow.set\_Slides(result);  
slideshow.set\_Delay(5000);  
slideshow.ShowImage();  
\}  
  
function OnError(result)  
\{  
alert(result.get\_message());  
\}

function OnTimeOut(result)  
\{  
alert(result);  
\}  
</script>  
</head>  
<body>  
<form id="form1" runat="server">  
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">  
<Scripts>  
<asp:ScriptReference Path="~/ComJs/slide.js" />  
</Scripts>  
</asp:ScriptManager>  
<img alt="" id="Image1" style="FILTER: blendTrans(duration=1);visibility:hidden" height="300px" width="380px" border="0px" />  
<br />  
<input id="Button1" type="button" value="1" οnclick="slideshow.ShowUserChoose(0)" style="width:100px" />  
<input id="Button2" type="button" value="2" οnclick="slideshow.ShowUserChoose(1)" style="width:100px" />  
<input id="Button3" type="button" value="3" οnclick="slideshow.ShowUserChoose(2)" style="width:100px" />  
<input id="Button4" type="button" value="4" οnclick="slideshow.ShowUserChoose(3)" style="width:100px" />  
</form>  
</body>  
</html>  
  
(2)aspx.cs

using System;  
using System.Data;  
using System.Configuration;  
using System.Collections;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
using System.Web.UI.HtmlControls;  
using System.Web.Services;

public partial class Photo : System.Web.UI.Page  
\{  
protected void Page\_Load(object sender, EventArgs e)  
\{

\[WebMethod\]  
public static string\[\] GetSlides()  
\{  
string\[\] strArrSlides = new string\[4\];  
strArrSlides\[0\] = "ComImage/01.jpg";  
strArrSlides\[1\] = "ComImage/02.jpg";  
strArrSlides\[2\] = "ComImage/03.jpg";  
strArrSlides\[3\] = "ComImage/04.jpg";  
return strArrSlides;  
\}  
\}  
  
(3)js

//注册ZHSlide命名空间  
Type.registerNamespace("ZHSlide");

//创建一个名为SildeShow的类  
ZHSlide.SlideShow=function()  
\{  
this.\_slides=new Array();//数组,存储图片URL  
this.\_delay=2000;//间隔时间,单位毫秒  
this.\_currentIndex=0;//当前图片在\_slides数组中的索引  
this.\_pause=false;//是否暂停幻灯片的显示,(true暂停,false运行)  
\}

//属性(理解:不同于cs里的属性,这里是个笼统的概念)  
ZHSlide.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;  
\},  
  
//这个属性首先会检查传来的值.  
//如果值超出了\_slides数组的范围,那会它会根据条件进行判断,设置该值为“0”或数组内元素总数减1.  
//其本质上就是让幻灯片可以循环播放.  
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;  
\}  
\},  
  
ShowUserChoose:function(number)  
\{  
var img=$get("Image1");  
var slides=this.get\_Slides();  
var curIndex=this.get\_CurrentIndex();  
img.src=slides\[number\];  
if(img.style.visibility=="hidden")  
\{  
img.style.visibility="visible";  
\}  
img.filters.blendTrans.apply();//淡入淡出效果  
img.filters.blendTrans.play();  
this.set\_CurrentIndex(number);  
clearTimeout(\_setTime);  
\_setTime=window.setTimeout("slideshow.ShowImage()", this.get\_Delay());  
\},  
  
ShowImage:function()  
\{  
var img=$get("Image1");  
var slides=this.get\_Slides();  
var curIndex=this.get\_CurrentIndex();  
img.src=slides\[curIndex\];  
if(img.style.visibility=="hidden")  
\{  
img.style.visibility="visible";  
\}  
img.filters.blendTrans.apply();//淡入淡出效果  
img.filters.blendTrans.play();  
this.set\_CurrentIndex(curIndex+1);  
\_setTime=window.setTimeout("slideshow.ShowImage()", this.get\_Delay());  
\}  
\}

//注册SildeShow的类  
ZHSlide.SlideShow.registerClass("ZHSlide.SlideShow");

var slideshow=new ZHSlide.SlideShow();

转载于:https://www.cnblogs.com/miclu/archive/2007/10/15/924678.html