使用ASP.NET AJAX实现(图片)幻灯片效果
(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" onclick="slideshow.ShowUserChoose(0)" style="width:100px" />
<input id="Button2" type="button" value="2" onclick="slideshow.ShowUserChoose(1)" style="width:100px" />
<input id="Button3" type="button" value="3" onclick="slideshow.ShowUserChoose(2)" style="width:100px" />
<input id="Button4" type="button" value="4" onclick="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();
