基于PHP AJAX的幻燈片播放實現

摘要:綜合運用所有與Ajax模型相關的基本元素，實現了一個具有圖片淡入淡出特效的客戶端Ajax幻燈片播放應用程序。用戶不必下載任何插件或運行有潛在風險的應用程序，僅需瀏覽網頁就可以看到炫麗的圖片特效。

關鍵詞:幻燈片播放;AJAX;PHP AJAX;DOM;XML

Implementation of Slide Show with PHP and AJAX

LI Yan

(Academy of Equipment Command Technology， Beijing 101416， China)

Abstract: Blending all the elements related with the Ajax model to create an Ajax client-side slide show with images fading in and out. Your users don't have to download any extensions or run potentially unsafe applications. They can just surf to your pages and get brilliant graphic effects.

Key words: Slide Show; AJAX; PHP AJAX; DOM; XML

Ajax作為客戶端與用戶間交互的一種技術，因其在Google maps地圖服務和Gmail網頁郵件服務中的應用，使人們看到了使用Ajax也可以很容易地做出炫麗的視覺效果。Ajax技術包含了HTML， JavaScript， CSS， XML， 以及異步WEB請求[1]，使用Ajax可以做出比Web1.0時代更美觀、更靈活的網頁互動應用。雖說自IE4.0時代就出現了這種技術，但是直到最近的這些應用展示了它的優勢以后，Ajax才引起了大家的關注。

實現Ajax難嗎? Ajax模型中的單個元素如XML可能相對要容易學，但難的是把所有的這些元素綜合運用起來。本文中的Ajax幻燈片播放應用程序讓瀏覽器從服務器上獲取圖片信息列表(包含有圖片文件的地址，寬和高)。然后，使用這些數據結合DHTML組成客戶端的幻燈片播放頁，在不下載Flash插件或其他應用程序的情況下，讓圖片淡入淡出交替顯現達到令人滿意的視覺效果。

1 獲取圖片信息列表

在服務器端，使用PHP代碼來返回所有可用圖片的相關屬性信息。所有這些圖片都保存在Images文件夾下。文件名的形式是name_width_height.jpg[2]，例如，horse_768_700.jpg，這樣只看文件名就知道圖片的寬為768像素，高為700像素。用這種方式命名的好處就是可以讓你更方便地讀取圖片屬性信息，進而生成前面所提到的圖片信息列表。具體代碼如下:

header( \"Content-type: text/xml\" );//聲明此文件的類型為XML

?>

if ($handle = opendir('images')) {//打開文件夾

while (1 !== ($file = readdir($handle)))//逐個檢索文件夾中的文件

{

if ( preg_match( \"/[.]jpg$/\"， $file ) ) {//判斷是否為jpg格式的文件

preg_match( \"/_(\\d+)_(\\d+)[.]/\"， $file， $found );//用正則表達式匹配圖片文件名

?>

\"http://圖片文件的地址

width=\"\"http://圖片的寬

height=\"\" />//圖片的高

}

}

closedir($handle);//關閉文件夾

}

?>

這段代碼中要注意的是要在代碼的開頭處設置content type為XML，只有這樣瀏覽器才能把該代碼所生成的頁面識別為XML格式的文件并為它創建文檔對象模型。代碼以標簽開始，然后讀取images文件夾下jpg格式的圖片文件并為每張圖片創建對應的標簽，最后代碼以標簽結束。

2 創建客戶端的AJAX幻燈片播放頁

幻燈片播放頁中的AJAX代碼從服務端的slides.php服務頁獲取圖片數據，關于這里使用AJAX回調服務頁面獲取更多數據的實現，一般都使用XMLHttp方式這里就不再贅述了。實現淡入淡出交替顯示幻燈片，主要通過以下三個JavaScript類:

1)圖片封裝類，該類中包含有圖片的相關屬性和操縱圖片對象的方法。

2)幻燈片播放管理類，該類主要用于幻燈片循環播放的實現。

3)效果類，該類用來實現圖像淡入淡出的效果。

2.1 圖片封裝類

首先做一個圖片容器，創建了一個名為ImageInfo的類。關鍵代碼如下:

function ImageInfo( src， width， height， htmlObj )

{

this.src = src;//圖片文件的地址

this.width = width;//圖片的寬

this.height = height;//圖片的高

this.htmlObj.src=this.src;//htmlObj是對標簽的引用

……

}

ImageInfo.prototype.set_opacity = function( opacity )

{

this.htmlObj.style.MozOpacity = opacity / 100;

var f = 'progid:DXImageTransform.Microsoft.Alpha(opacity='+opacity+')';

this.htmlObj.style.filter = f;

}

對于幻燈片中每個圖片都有一個對應的ImageInfo對象，這個對象封裝了該圖片的相關屬性(src， width， height)以及對標簽的引用(代碼中的htmlObj)。有了這個引用就可以通過ImageInfo對象調用set_opacity方法來設置該圖片對象的透明度。注意Firefox和其他基于Gecko的瀏覽器要使用MozOpacity來設置透明度，而IE瀏覽器則使用濾鏡效果。

2.2 效果類

在本類中先使用簡單的算法來確定透明度之后，再調用圖片封裝類的set_opacity方法設置圖片的透明度，隨著透明度的值不斷發生變化最終實現圖片的淡入淡出效果。部分關鍵代碼如下:

function Fader( img， windowSize )

{

this.img = img;//標簽的引用

this.windowSize = windowSize;

}

Fader.prototype.apply = function( percent )

{

var opacity = 100;

if ( percent <= this.windowSize )

opacity = ( percent / this.windowSize ) * 100;

else if ( percent >= ( 100 - this.windowSize ) )

opacity = ( ( 100 - percent ) / this.windowSize ) * 100;

this.img.set_opacity( opacity );//設置圖片透明度

}

2.3 幻燈片播放管理類

幻燈片播放管理類用于幻燈片的播放控制。以下是部分關鍵代碼:

function SlidesManager( speed )

{

this.Slides = [];//用來存放圖片信息列表的數組

var self = this;

window.setInterval( function() { self.idle(); }， speed );

}// setInterval方法不停地調用state函數

SlidesManager.prototype.state = function()

{

if ( this. Slides.length > 0 )

{

this. Slides [0].play();//播放幻燈片

if ( this. Slides [0].done() )

this. Slides.shift();//達到指定的顯示時長就刪除當前正播放的幻燈片

if ( this. Slides.length == 0 )

this.on_finished();//全部圖片播放完畢則調用on_finished方法重新開始幻燈片播放

}

}

Slides.prototype.done = function()

{

var d = new Date();

return ( ( d.valueOf() - this.startMS ) / 1000 ) > this.seconds;

//控制幻燈片的顯示時長

}//這里startMS是開始播放的時間

使用JavaScript編寫動畫代碼時常用window.setInterval方法來實現動態效果[3]。在該方法中可以指定調用函數的時間間隔和所要調用的函數，但是使用該方法設定的時間間隔常常不穩定。比如，設定為20毫秒調用一次，真正執行時可能得到的是每25毫秒調用一次，下一次執行時又可能比上一次的間隔長一點，所以你不能依賴這個方法的時間間隔設置實現所期望的動態效果。這里使用的解決方法就是用new Date().valueOf方法來記錄幻燈片開始播放的時間，如果圖片播放持續的時間超過設定的時間就立即終止當前圖片的播放，播放下一張圖片。

2.4 AJAX幻燈片播放頁

編寫幻燈片播放頁主要有以下幾個步驟:

1)完成上面三個基本的類之后，把這三個類保存為JS格式的文件在幻燈播放頁用