網站首頁的輪播新聞flash效果實現

本來公司做的外網上有一個圖片滾動新聞的效果，是用jQuery外掛實現的，可是客戶提要求，說是嫌效果只有一個，要麼從上到下變換，要麼從左到右的變換，因此改成了用flash實現的效果！。

效果圖如下：

從網上看了好多程式碼，可是不太合適，後來從一個正在使用該效果的政府網站上拷貝了他的原始碼，想起之前公司也做過一個類似的效果，兩者對比，修改後，終於正常執行。程式碼如下：

$(document).ready(function(){
				var pics = ""; //定義顯示圖片的變數，用於拼接圖片使用
				var links = "";//連結的變數，拼接連結
				var texts = "";//文字變數，使用者拼接文字描述
				var picarray = new Array();
				var linksarray = new Array();
				var textsarray = new Array();
				#foreach($img in $!{imgList})
				  picarray.push("${R}$!{img.img}");
				  linksarray.push("$!{root}/article/$!{img.id}/index/新聞/圖片新聞");
				  textsarray.push("$!{img.title}");
				#end
				
				pics= picarray.join("|");
				links = linksarray.join("|");
				texts = textsarray.join("|");
				
				var focus_width=300; //圖片寬度
				var focus_height=243;//圖片高度
				var text_height=43;//文字高度
				var swf_height = focus_height+text_height;//flash的高度=圖片高度+文字高度
				var html = '<object 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="'+ focus_height +'">'
				+ '<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="${R}flash/playswf.swf"><param name="quality" value="high"><param name="bgcolor" value="#e3e3e3">'
				+ '<param name="menu" value="false"><param name=wmode value="opaque">'
				+ '<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'
				+ '<embed src="${R}flash/playswf.swf" wmode="opaque" flashvars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">'
				+ '</object>';
				$("#KinSlideshow").html(html);
		});

原理就是，頁面載入完成後，生成一段渲染flash的HTML程式碼，將其賦給頁面的某個元素（KinSlideshow）。 

渲染時候，圖片的地址，顯示文字，連結要有固定的格式，多條之間要用“|”分割開來。 上述程式碼中，先是對後臺來的資料進行遍歷（velocity模板）。每次遍歷時，將其放入到陣列中。遍歷完成後，使用js陣列的join方法，新增一個“|”，這樣要顯示的資料就渲染好了。然後再在flash的原始碼中，按照規定的格式傳入即可。

flash檔案的位置：

<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="${R}flash/playswf.swf">
<embed src="${R}flash/playswf.swf"

這兩個地方，是flash檔案的地址，指向自己的flash檔案即可。

例子下載。以後就不會忘記了。http://download.csdn.net/detail/lxl631/7058747