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

1.页面cs代码

using System;

using System.Data;

using System.Configuration;

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 AjaxPro;

public partial class _Default : System.Web.UI.Page

{

protected string displayCategoryID;

protected void Page_Load(object sender, EventArgs e)

{

Utility.RegisterTypeForAjax(typeof(AjaxMethod));

displayCategoryID = "17";

}

2.html代码

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

</head>

</div>

</div>

// 定时器

var timeDelay;

// 图片自动浏览时的时间间隔

var timeInterval = 4000;

// Array对象,存储图片文件的路径

var image;

// 当前显示的图片序号

var num;

// 当前浏览状态,该状态用于控制4个按钮的状态

var nStatus;

// 图片显示区域

var slideShow = el("slideShow");

// 图片信息数据表

var dt;

// 预加载图片信息

function PreloadImage(iCategoryID)

{

// 采用同步调用的方式获取图片的信息

var ds = AjaxMethod.GetPhotoList(iCategoryID).value;

// 如果返回了结果

if (ds)

{

// 判断数据表是否不为空

if (ds.Tables[0].Rows.length > 0)

{

// 返回的图片信息数据表

dt = ds.Tables[0];

// 用image对象存储图片的文件路径

image = new Array();

// 图片在Photos目录下

for (var i = 0; i < dt.Rows.length; i++)

{

image.push("Photos/" + dt.Rows[i].photo_path);

}

// imagePreload对象用于实现图片的预缓存

var imagePreload = new Array();

for (var i = 0;i < image.length;i++)

{

// 通过新建Image对象,并将其src属性指向图片的URL

// 显现图片的预缓存

imagePreload[i] = new Image();

imagePreload[i].src = image[i];

}

// 初始化一些变量

num = -1;

nStatus = 0x09;

// 加载第一张图片

next_image();

}

else // 分类下没有图片

{

alert("该目录下没有图片！");

}

// 实现图片切换时的效果

function image_effects()

{

// Transition的值为0~23之间的随机数,代表24种切换效果

// 具体值与效果之间的对应见MSDN

slideShow.filters.revealTrans.Transition = Math.random() * 23;

// 应用并播放切换效果

slideShow.filters.revealTrans.apply();

slideShow.filters.revealTrans.play();

}

// 切换到上一张图片

function previous_image()

{

// 图片序号向前移动,如果已经是第一张,则切换到最后一张

num += image.length - 1;

num %= image.length;

// 图片切换的效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示

slideShow.src = image[num];

// 获取图片的标题、说明信息

getPhotoInfo();

// 设置按钮状态

setBtnStatus();

}

// 切换到下一张图片

function next_image()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num++;

num %= image.length;

// 图片的切换效果

image_effects();

// 将<img>对象的src属性设置为当前num对应的路径

// 切换图片的显示

slideShow.src = image[num];

// 获取图片的标题、说明信息

getPhotoInfo();

// 设置按钮状态

setBtnStatus();

}

// 自动浏览图片

function slideshow_automatic()

{

// 当前图片的序号向后移动,如果已经是最后一张,

// 则切换到第一张图片

num++;

num %= image.length;

// 图片的切换效果

image_effects();

// <img>对象的src属性设置为当前num指定的URL

// 切换图片的显示

slideShow.src = image[num];

// 获取图片的标题、说明信息

getPhotoInfo();

// 设置按钮的状态,使播放按钮失效,暂停按钮有效

nStatus &= 0x0E;

nStatus |= 0x02;

setBtnStatus();

// slideshow_automatic函数每隔一段时间自动执行

timeDelay = setTimeout("slideshow_automatic()", timeInterval);

}

// 停止自动播放

function pauseSlideShow()

{

// 清除定时器,不再执行slideshow_automatic函数

clearTimeout(timeDelay);

// 设置按钮的状态,使播放按钮有效,暂停按钮失效

nStatus &= 0x0d;

nStatus |= 0x01;

setBtnStatus();

}

// 设置按钮的状态:

// 判断的依据是当前是否处于自动播放的状态

// 以及当前显示的图片是否第一张或最后一张图片

function setBtnStatus(bDir)

{

// 如果是第一张图片

if (num == 0)

{

// 向前切换图片的按钮失效

nStatus &= 0x0b;

}

// 如果是最后一张图片

if (num == (image.length - 1))

{

// 向后切换图片的按钮失效

nStatus &= 0x07;

}

// 如果既不是最后一张,也不是第一张图片

if (num != 0 && num !=(image.length - 1))

{

// 向前、向后切换图片的按钮均有效

nStatus |= 0x0c;

}

// 根据nStatus每一位的值确定4个按钮的背景图

el("btnPlay").src = ((nStatus & 0x01) == 0x01) ?

"images/play.gif" : "images/play_bw.gif";

el("btnPause").src = ((nStatus & 0x02) == 0x02) ?

"images/pause.gif" : "images/pause_bw.gif";

el("btnPrev").src = ((nStatus & 0x04) == 0x04) ?

"images/prev.gif" : "images/prev_bw.gif";

el("btnNext").src = ((nStatus & 0x08) == 0x08) ?

"images/next.gif" : "images/next_bw.gif";

// 根据nStatus每一位的值确定鼠标移动到4个按钮上方时的形状

el("btnPlay").style.cursor = ((nStatus & 0x01) == 0x01) ?

"pointer" : "default";

el("btnPause").style.cursor = ((nStatus & 0x02) == 0x02) ?

"pointer" : "default";

el("btnPrev").style.cursor = ((nStatus & 0x04) == 0x04) ?

"pointer" : "default";

el("btnNext").style.cursor = ((nStatus & 0x08) == 0x08) ?

"pointer" : "default";

// 根据nStatus的每一位确定4个按钮是否具有onclick响应

el("btnPlay").onclick = ((nStatus & 0x01) == 0x01) ?

function() {slideshow_automatic();} : function() {return false;};

el("btnPause").onclick = ((nStatus & 0x02) == 0x02) ?

function() {pauseSlideShow();} : function() {return false;};

el("btnPrev").onclick = ((nStatus & 0x04) == 0x04) ?

function() {previous_image();} : function() {return false;};

el("btnNext").onclick = ((nStatus & 0x08) == 0x08) ?

function() {next_image();} : function() {return false;};

// 显示当前图片浏览的进度

el("progress").innerHTML = (num + 1) + " / " + image.length;

}

// 获取图片的标题、说明信息

function getPhotoInfo()

{

return;

// 图片ID号

var id = dt.Rows[num].id;

// 如果存在

if (id)

{

// 异步调用Ajax方法GetPhotoInfo

AjaxMethod.GetPhotoInfo(id, GetPhotoInfo_callback);

}

// 回调函数,根据响应的内容显示标题和说明信息

function GetPhotoInfo_callback(response)

{

// 获取图片的信息

var dt_photo = response.value.Tables[0];

// 如果图片存在

if (dt_photo.Rows.length > 0)

{

// 显示图片的标题和说明

el("title").innerHTML = dt_photo.Rows[0].photo_title;

el("description").innerHTML = dt_photo.Rows[0].photo_description;

}

</SCRIPT>

</form>

</body>

</html>

3.AjaxMethod类

using System;

using System.Data;

using System.Configuration;

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.Data.SqlClient;

using AjaxPro;

/// <summary>

/// Summary description for AjaxMethod

/// </summary>

public class AjaxMethod

{

public AjaxMethod()

{

// TODO: Add constructor logic here

}

public static string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();

GetDataSet

/// <summary>

/// 获取某个分类下图片的id和photo_path信息

/// </summary>

/// <param name="iCategoryID">分类ID号</param>

/// <returns>图片信息(id, photo_path)的信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

public static DataSet GetPhotoList(int iCategoryID)

{

string sql = string.Format("SELECT id, photo_path FROM Photo WHERE photo_category_id = {0}", iCategoryID);

return GetDataSet(sql);

}

/// <summary>

/// 获取图片信息(标题、说明)

/// </summary>

/// <param name="id">图片id</param>

/// <returns>图片信息</returns>

[AjaxMethod(HttpSessionStateRequirement.ReadWrite)]

public static DataSet GetPhotoInfo(int id)

{

string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id);

return GetDataSet(sql);

}

4.Web.config

<?xml version="1.0"?>

</appSettings>

<system.web>

</httpHandlers>

</system.web>

</configuration>

5.sql脚本

if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Photo]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)

drop table [dbo].[Photo]

CREATE TABLE [dbo].[Photo] (

[id] [int] IDENTITY (1, 1) NOT NULL ,

[photo_title] [varchar] (128) COLLATE Chinese_PRC_CI_AS NULL ,

[photo_description] [text] COLLATE Chinese_PRC_CI_AS NULL ,

[photo_category_id] [int] NULL ,

[photo_path] [varchar] (255) COLLATE Chinese_PRC_CI_AS NULL

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

6.原代码/Files/singlepine/AjaxChangeImage.rar

posted on 2006-07-09 00:06 小山阅读(14052) 评论(17) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

小山

公告