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,EventArgse)
{
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 >
&nbsp;&nbsp;&nbsp;
< 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);

// 設置按鈕的狀態,使播放按鈕有效,暫停按鈕失效
<