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

一、AjaxMethod

using System;
using System.Data;
using System.Data.SqlClient;

namespace AjaxImage

二、页面HTML代码：

<div id="Layer1" style="Z-INDEX:1; LEFT:104px; WIDTH:501px; POSITION:absolute; TOP:28px; HEIGHT:345px">
<img name="slideShow" src="images/space.gif" width="500" height="300" style="FILTER:revealTrans(duration=2,transition=23)">
</div>
<div id="Layer2" style="Z-INDEX:2; LEFT:490px; WIDTH:112px; POSITION:absolute; TOP:380px; HEIGHT:26px">
<img id="btnPlay" src="images/play_bw.gif" onclick="slideshow_automatic()" onmouseover="this.src='images/play.gif'"
onmouseout="this.src='images/play_bw.gif'"> <img id="btnPause" src="images/pause_bw.gif" onclick="pauseSlideShow()" onmouseover="this.src='images/pause.gif'"
onmouseout="this.src='images/pause_bw.gif'"> <img id="btnPrev" src="images/prev_bw.gif" onclick="previous_image()" onmouseover="this.src='images/prev.gif'"
onmouseout="this.src='images/prev_bw.gif'"> <img id="btnNext" src="images/next_bw.gif" onclick="next_image()" onmouseover="this.src='images/next.gif';next_image()"
onmouseout="this.src='images/next_bw.gif'">
</div>

三、JAVASCRIPT:

<script language="javascript" type="text/javascript">
// 定时器
var timeDelay;

// 图片自动浏览时的时间间隔
var timeInterval = 4000;

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

// 当前显示的图片序号
var num;

// 图片信息数据表
var dt;
// 预加载图片信息
function PreloadImage(iCategoryID)
// 实现图片切换时的效果
function image_effects()
function next_image()
function previous_image()
function slideshow_automatic()
// 停止自动播放
function pauseSlideShow()
</script>

四、在主页面的ONLOAD事件里面添加：

onload="PreloadImage('2')"

五、WebConfig添加:
<system.web>
<httpHandlers>
<add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro" />
</httpHandlers>

<configuration>
<appSettings>
<add key="ConnectionString" value="server=127.0.0.1;database=test;uid=sa;pwd=dfdf" />
</appSettings>
六、数据库脚本:

CREATE TABLE [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