Ajax无刷新实现图片切换特效

1.页面cs代码

using System;
Ajax无刷新实现图片切换特效

using System.Data;
Ajax无刷新实现图片切换特效

using System.Configuration;
Ajax无刷新实现图片切换特效

using System.Web;
Ajax无刷新实现图片切换特效

using System.Web.Security;
Ajax无刷新实现图片切换特效

using System.Web.UI;
Ajax无刷新实现图片切换特效

using System.Web.UI.WebControls;
Ajax无刷新实现图片切换特效

using System.Web.UI.WebControls.WebParts;
Ajax无刷新实现图片切换特效

using System.Web.UI.HtmlControls;
Ajax无刷新实现图片切换特效

using AjaxPro;
Ajax无刷新实现图片切换特效

public partial class _Default : System.Web.UI.Page
Ajax无刷新实现图片切换特效

{

protected string displayCategoryID;
Ajax无刷新实现图片切换特效

protected void Page_Load(object sender, EventArgs e)
Ajax无刷新实现图片切换特效

{

Utility.RegisterTypeForAjax(typeof(AjaxMethod));
Ajax无刷新实现图片切换特效

displayCategoryID = "17";
Ajax无刷新实现图片切换特效

}

2.html代码

<html xmlns="http://www.w3.org/1999/xhtml" >
Ajax无刷新实现图片切换特效

<head runat="server">
Ajax无刷新实现图片切换特效

<title>Ajax无刷新实现图片切换特效</title>

</head>

<body onload="PreloadImage('<%=displayCategoryID %>');">
Ajax无刷新实现图片切换特效

<form id="form1" runat="server">
Ajax无刷新实现图片切换特效

<div id="photoarea" style="width: 514px; height: 496px; left: 0px; top: 0px;">
Ajax无刷新实现图片切换特效

<div id="photo" style="left: 5px; top: 9px; height: 432px;">
Ajax无刷新实现图片切换特效

<img id="slideShow" src="images/space.gif" style="filter:revealTrans(duration=2,transition=23)">
Ajax无刷新实现图片切换特效

</div>

<div id="op" align="left" style="left: 12px; top: 457px">
Ajax无刷新实现图片切换特效

<span id="progress" style="FONT-SIZE: 20px"></span>
Ajax无刷新实现图片切换特效

   
Ajax无刷新实现图片切换特效

<img id="btnPlay" src="images/play_bw.gif">
Ajax无刷新实现图片切换特效

<img id="btnPause" src="images/pause_bw.gif">
Ajax无刷新实现图片切换特效

<img id="btnPrev" src="images/prev_bw.gif">
Ajax无刷新实现图片切换特效

<img id="btnNext" src="images/next_bw.gif">
Ajax无刷新实现图片切换特效

</div>

<SCRIPT type="text/javascript"> Ajax无刷新实现图片切换特效

// 定时器

var timeDelay;
Ajax无刷新实现图片切换特效

// 图片自动浏览时的时间间隔
Ajax无刷新实现图片切换特效

var timeInterval = 4000;
Ajax无刷新实现图片切换特效

// Array对象,存储图片文件的路径
Ajax无刷新实现图片切换特效

var image;
Ajax无刷新实现图片切换特效

// 当前显示的图片序号
Ajax无刷新实现图片切换特效

var num;

// 当前浏览状态,该状态用于控制4个按钮的状态
Ajax无刷新实现图片切换特效

var nStatus;
Ajax无刷新实现图片切换特效

// 图片显示区域

var slideShow = el("slideShow");
Ajax无刷新实现图片切换特效

// 图片信息数据表
Ajax无刷新实现图片切换特效

var dt;

// 预加载图片信息
Ajax无刷新实现图片切换特效

function PreloadImage(iCategoryID)
Ajax无刷新实现图片切换特效

{

// 采用同步调用的方式获取图片的信息
Ajax无刷新实现图片切换特效

var ds = AjaxMethod.GetPhotoList(iCategoryID).value;
Ajax无刷新实现图片切换特效

// 如果返回了结果
Ajax无刷新实现图片切换特效

if (ds)

{

// 判断数据表是否不为空
Ajax无刷新实现图片切换特效

if (ds.Tables[0].Rows.length > 0)
Ajax无刷新实现图片切换特效

{

// 返回的图片信息数据表
Ajax无刷新实现图片切换特效

dt = ds.Tables[0];
Ajax无刷新实现图片切换特效

// 用image对象存储图片的文件路径
Ajax无刷新实现图片切换特效

image = new Array();
Ajax无刷新实现图片切换特效

// 图片在Photos目录下
Ajax无刷新实现图片切换特效

for (var i = 0; i < dt.Rows.length; i++)
Ajax无刷新实现图片切换特效

{

image.push("Photos/" + dt.Rows[i].photo_path);
Ajax无刷新实现图片切换特效

}

// imagePreload对象用于实现图片的预缓存
Ajax无刷新实现图片切换特效

var imagePreload = new Array();
Ajax无刷新实现图片切换特效

for (var i = 0;i < image.length;i++)
Ajax无刷新实现图片切换特效

{

// 通过新建Image对象,并将其src属性指向图片的URL
Ajax无刷新实现图片切换特效

// 显现图片的预缓存
Ajax无刷新实现图片切换特效

imagePreload[i] = new Image();
Ajax无刷新实现图片切换特效

imagePreload[i].src = image[i];
Ajax无刷新实现图片切换特效

}

// 初始化一些变量
Ajax无刷新实现图片切换特效

num = -1;

nStatus = 0x09;
Ajax无刷新实现图片切换特效

// 加载第一张图片
Ajax无刷新实现图片切换特效

next_image();
Ajax无刷新实现图片切换特效

}

else // 分类下没有图片
Ajax无刷新实现图片切换特效

{

alert("该目录下没有图片！");
Ajax无刷新实现图片切换特效

}

// 实现图片切换时的效果
Ajax无刷新实现图片切换特效

function image_effects()
Ajax无刷新实现图片切换特效

{

// Transition的值为0~23之间的随机数,代表24种切换效果
Ajax无刷新实现图片切换特效

// 具体值与效果之间的对应见MSDN
Ajax无刷新实现图片切换特效

slideShow.filters.revealTrans.Transition = Math.random() * 23;
Ajax无刷新实现图片切换特效

// 应用并播放切换效果
Ajax无刷新实现图片切换特效

slideShow.filters.revealTrans.apply();
Ajax无刷新实现图片切换特效

slideShow.filters.revealTrans.play();
Ajax无刷新实现图片切换特效

}

// 切换到上一张图片
Ajax无刷新实现图片切换特效

function previous_image()
Ajax无刷新实现图片切换特效

{

// 图片序号向前移动,如果已经是第一张,则切换到最后一张
Ajax无刷新实现图片切换特效

num += image.length - 1;
Ajax无刷新实现图片切换特效

num %= image.length;
Ajax无刷新实现图片切换特效

// 图片切换的效果
Ajax无刷新实现图片切换特效

image_effects();
Ajax无刷新实现图片切换特效

&nbs