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代碼
<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類
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
<?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腳本
if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[Photo]') and OBJECTPROPERTY(id, N'IsUserTable') = 1)drop table [dbo].[Photo]GOCREATE 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
