一个ECshop首页flash图片焦点广告模版_简单的JS读xml文件实例
转载本站文章请注明，转载自：昕星谷[http://oneyicn.gobaiyi.com]
本文链接: 一个ECshop首页flash图片焦点广告模版_简单的JS读xml文件实例">http://oneyicn.gobaiyi.com/archives/2021/
ECshop里首页的焦点图片轮换广告也是很不错的了。只是有时也有自己的需求，研究了一下其自带的广告插件，发现完全可以自己按其夫则自己做一个。
1.广告文件存放在data/flashdata/autofocus/目录下。
2.一个目录则是一个广告模版。
3.主要有4个文件：autofocus.swf(一个Flash文件)、cycle_image.js(主要调用文件)、data.xml(后台设置的flash参数文件)、preview.jpg(后台显示的预览图片)。
所以autofocus.swf文件就是自己风格的swf了，只是能跟据提供的参数来显示广告图片就可以了。preview.jpg，也是自己做一个就OK了。data.js是ECshop后台生成的，也不用去管的。只是要知道它的用途跟格式，可以其它swf文件所需的参数格式就可以了。关键是cycle_image.js文件了。
cycle_image.js也分成主要的4个部分， 首先是头部的 /* Flash Name: auto Focus Description: 渐显自动Flash图片轮播<a href="http://oneyicn.gobaiyi.com/archives/2021/">http://oneyicn.gobaiyi.com/archives/2021/</a> */
定义在后台显示的提示文字。
第二段是写入一个DIV层，供加入Flasgh用。
document.write('<div id="flash_cycle_image"></div>');第三段是show_flash()函数，一般只要改改这里就可以了。这里改成如下的内容了。
function show_flash()
{
var text_height = 0;
var focus_width = swf_width;
var focus_height = swf_height - text_height;
var total_height = focus_height + text_height;
//生成参数,关键
var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("data/flashdata/autofocus/data.xml");
var y=xmlDoc.getElementsByTagName("bcaster");
var x=y[0].getElementsByTagName("item")
var xmlData='<list>';
for (i=0;i<x.length;i++)
{
xmlData += '<item><img>' + x[i].getAttribute('item_url') + '</img><url>' + x[i].getAttribute('link') + '</url></item>';
}
xmlData += '</list>';
}
iHTML= '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="<a href="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0</a>" width="'+ focus_width +'" height="'+ total_height +'">';
iHTML += '<param name="allowScriptAccess" value="sameDomain">';
iHTML += '<param name="movie" value="data/flashdata/autofocus/autofocus.swf">';
iHTML += '<param name="quality" value="high">';
iHTML += '<param name="bgcolor" value="#F0F0F0">';
iHTML += '<param name="menu" value="false">';
iHTML += '<param name=wmode value="opaque">';
iHTML += '<param name="flashvars" value="xmlData='+xmlData+'">';//swf文件参数传递
iHTML += '<embed src="data/flashdata/autofocus/autofocus.swf" ';
iHTML += 'flashvars="xmlData='+xmlData;//swf文件参数传递
iHTML += '&borderwidth='+focus_width;
iHTML += '&borderheight='+focus_height;
iHTML += '&textheight='+text_height;
iHTML += '" quality="high" width="'+ focus_width ;
iHTML += '" height="'+ total_height ;
iHTML += '" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="<a href="http://www.macromedia.com/go/getflashplayer">http://www.macromedia.com/go/getflashplayer</a>" wmode="transparent"/>'+'</object>';
document.getElementById('flash_cycle_image').innerHTML =iHTML;
}
其实修改的东西也不多，主要是本swf文件获取参数的格式不一样，用XML格式的，所以要把从date.xml文件的格式转换一下，就是好了 var xmlDoc=null;
if (window.ActiveXObject)
{
// code for IE
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument)
{
// code for Mozilla, Firefox, Opera, etc.
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
if (xmlDoc!=null)
{
xmlDoc.async=false;
xmlDoc.load("data/flashdata/autofocus/data.xml");
var y=xmlDoc.getElementsByTagName("bcaster");
var x=y[0].getElementsByTagName("item")
var xmlData='<list>';
for (i=0;i<x.length;i++)
{
xmlData += '<item><img>' + x[i].getAttribute('item_url') + '</img><url>' + x[i].getAttribute('link') + '</url></item>';
}
xmlData += '</list>';
}这几行，
下面的内容也是跟据flash文件的需要作了点修改，并分为多行的形式，这样更方便阅读也修改。
第四段就是执行调用了。也不用改，只是要把路径作下相应的修改就OK了。
show_flash();
一个ECshop首页flash图片焦点广告模版( 326 )
请您多出些这样的文章！支持您。