一、AjaxMethodusing System;using System.Data;using System.Data.SqlClient;
namespace AjaxImage{ /**//// <summary> /// AjaxMethod 的摘要说明。 /// </summary> public class AjaxMethod { public AjaxMethod() { } public static string ConnectionString = System.Configuration.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
[AjaxPro.AjaxMethod] public static DataSet GetPhotoList( int iCategoryID ) { string sql = "Select id,photo_path FROM Photo where photo_category_id=" + iCategoryID ; return GetDataSet( sql ); } [AjaxPro.AjaxMethod] public static DataSet GetPhotoInfo( int id ) { string sql = string.Format("SELECT photo_title, photo_description FROM Photo WHERE id = {0}", id); return GetDataSet( sql ); }
}//end class}
二、页面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) { // 采用同步调用的方式获取图片的信息 var ds = AjaxImage.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[i] = "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 document.slideShow.filters.revealTrans.Transition = Math.random() * 23; // 应用并播放切换效果 document.slideShow.filters.revealTrans.apply(); document.slideShow.filters.revealTrans.play(); } function next_image() { // 当前图片的序号向后移动,如果已经是最后一张, // 则切换到第一张图片 num++; num %= image.length; // 图片的切换效果 image_effects(); // 将<img>对象的src属性设置为当前num对应的路径 // 切换图片的显示 document.slideShow.src = image[num]; } function previous_image() { // 当前图片的序号向后移动,如果已经是最后一张, // 则切换到第一张图片 num += image.length - 1; num %= image.length; // 图片的切换效果 image_effects(); // 将<img>对象的src属性设置为当前num对应的路径 // 切换图片的显示 document.slideShow.src = image[num]; } function slideshow_automatic() { // 当前图片的序号向后移动,如果已经是最后一张, // 则切换到第一张图片 num ++; num %= image.length; // 图片的切换效果 image_effects(); // 将<img>对象的src属性设置为当前num对应的路径 // 切换图片的显示 document.slideShow.src = image[num]; timeDelay = setTimeout( "slideshow_automatic()",timeInterval ); } // 停止自动播放 function pauseSlideShow() { // 清除定时器,不再执行slideshow_automatic函数 clearTimeout(timeDelay); } </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]GOhttp://www.cnblogs.com/wander/archive/2006/09/19/508648.html
