<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>