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代码
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";
}
}
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head runat ="server" >
< title > Ajax无刷新实现图片切换特效 </ title >
< link type ="text/css" href ="css/tree.css" rel ="stylesheet" >
< link type ="text/css" href ="css/global.css" rel ="stylesheet" >
< script type =text/javascript src =javascript/tree.js ></ script >
</ head >
< body onload ="PreloadImage('<%=displayCategoryID %>');" >
< form id ="form1" runat ="server" >
< div id ="photoarea" style ="width: 514px; height: 496px; left: 0px; top: 0px;" >
< div id ="photo" style ="left: 5px; top: 9px; height: 432px;" >
< img id ="slideShow" src ="images/space.gif" style ="filter:revealTrans(duration=2,transition=23)" >
</ div >
< div id ="op" align ="left" style ="left: 12px; top: 457px" >
< span id ="progress" style ="FONT-SIZE: 20px" ></ span >
< img id ="btnPlay" src ="images/play_bw.gif" >
< img id ="btnPause" src ="images/pause_bw.gif" >
< img id ="btnPrev" src ="images/prev_bw.gif" >
< img id ="btnNext" src ="images/next_bw.gif" >
</ div >
</ div >
< SCRIPT type ="text/javascript" >
// 定时器
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类
< head runat ="server" >
< title > Ajax无刷新实现图片切换特效 </ title >
< link type ="text/css" href ="css/tree.css" rel ="stylesheet" >
< link type ="text/css" href ="css/global.css" rel ="stylesheet" >
< script type =text/javascript src =javascript/tree.js ></ script >
</ head >
< body onload ="PreloadImage('<%=displayCategoryID %>');" >
< form id ="form1" runat ="server" >
< div id ="photoarea" style ="width: 514px; height: 496px; left: 0px; top: 0px;" >
< div id ="photo" style ="left: 5px; top: 9px; height: 432px;" >
< img id ="slideShow" src ="images/space.gif" style ="filter:revealTrans(duration=2,transition=23)" >
</ div >
< div id ="op" align ="left" style ="left: 12px; top: 457px" >
< span id ="progress" style ="FONT-SIZE: 20px" ></ span >
< img id ="btnPlay" src ="images/play_bw.gif" >
< img id ="btnPause" src ="images/pause_bw.gif" >
< img id ="btnPrev" src ="images/prev_bw.gif" >
< img id ="btnNext" src ="images/next_bw.gif" >
</ div >
</ div >
< SCRIPT type ="text/javascript" >
// 定时器
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 >
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#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
if (ds != null)
return ds;
else
return null;
}
#endregion
/**//// <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
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#region GetDataSet
public static DataSet GetDataSet(string sql)
{
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
if (ds != null)
return ds;
else
return null;
}
#endregion
/**//// <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);
}
}
<?
xml version="1.0"
?>
< configuration >
< appSettings >
< add key ="ConnectionString" value ="Data Source=localhost;user id=sa;password=sa;initial catalog=DB" />
</ appSettings >
< connectionStrings />
< system .web >
< httpHandlers >
< add verb ="POST,GET" path ="ajaxpro/*.ashx" type ="AjaxPro.AjaxHandlerFactory, AjaxPro" />
</ httpHandlers >
< compilation debug ="false" />
< authentication mode ="Windows" />
</ system.web >
</ configuration >
5.sql脚本
< configuration >
< appSettings >
< add key ="ConnectionString" value ="Data Source=localhost;user id=sa;password=sa;initial catalog=DB" />
</ appSettings >
< connectionStrings />
< system .web >
< httpHandlers >
< add verb ="POST,GET" path ="ajaxpro/*.ashx" type ="AjaxPro.AjaxHandlerFactory, AjaxPro" />
</ httpHandlers >
< compilation debug ="false" />
< authentication mode ="Windows" />
</ system.web >
</ configuration >
if
exists
(
select
*
from
dbo.sysobjects
where
id
=
object_id
(N
'
[dbo].[Photo]
'
)
and
OBJECTPROPERTY
(id, N
'
IsUserTable
'
)
=
1
)
drop table [ dbo ] . [ Photo ]
GO
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 ]
GO
6.原代码
/Files/singlepine/AjaxChangeImage.rar
drop table [ dbo ] . [ Photo ]
GO
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 ]
GO