項目中首頁有個圖片廣告輪流播放的功能,看了一下是用flash+javascript實現的。在網上google了一下,原來網上已有此解決方案。
原理:使用JAVASCRIPT和FLASH進行資料交換
檔案:一個調用FLASH和含有JAVASCRIPT的html檔案+一個廣告FLASH檔案
<script type="text/javascript">
<!--
var focus_width=365;
var focus_height=420;
var text_height=0;
var swf_height = focus_height+text_height;
var pics='http:www.pconline.com.cn/test/toptitle/images/picpath/pmareddian365.jpg|http:www.pconline.com.cn/test/toptitle/images/picpath/jiadian(2).JPG|http:www.pconline.com.cn/test/toptitle/images/picpath/02232yuejiangkpfoc.jpg';
var links='http:www.pconline.com.cn/digital/dc/news/cmt/0602/760853.html|http:www.pconline.com.cn/digital/family/|http:www.pconline.com.cn/digital/audio/daogou/mp3/time/0602/760219.html';
var texts='DC|家電|隨身聽';
document.write('<object ID="focus_flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http:fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#E7E7E7">');
document.write('<param name="menu" value="false"><param name=wmode value="transparent">');
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed ID="focus_flash" src="pixviewer.swf" wmode="transparent" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#E7E7E7" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http:www.macromedia.com/go/getflashplayer"/>'); document.write('</object>');
//-->
</script>
幾個參數說明。
focus_width 用來設定FLASH寬度
focus_height 用來設定FLASH高度
text_height 設定顯示字型地區高度(字會顯示在FLASH最下面,如果是0就不顯示)
pics 設定載入圖片的地址,中間以“|”分隔
links 設定載入圖片連結的地址,中間以“|”分隔
texts 設定載入圖片解說文字的地址,中間以“|”分隔,如果text_height設定是0的話就不會顯示
在實際使用中,pixviewer.swf存放在某個檔案夾下,輪播的圖片存放在項目的某個檔案夾中,此兩處的路徑稍微改動下即可。另外圖片以幾十KB大小,bmp格式為好,像素在256*252顯示效果不錯。具體的範圍,可以自己去試。pics為圖片的伺服器端地址(中間以"|"隔開)。links 為載入圖片連結的地址(中間同樣以"|"隔開),它裡面的字串內容沒嚴格要求。
實現的效果類似。
此方案缺點是:對圖片有限制要求,圖片輪播的時間間隔和圖片的停留時間不能人為控制。
flash檔案pixviewer.swf.可點這裡下載。