世博官网是今年的流行站点。该站的焦点图片报道用Flash实现,有JavaScript专家仿造一例在网上流行,但只是实现了图片效果,有个细节疏忽了,就是图片的切换时其链接地址未能切换。没时间去好好研究修改,我们还是到官网找点代码用flash实现吧。
首先把focus.swf下载下来,上传到服务器。官网上的这个flash文件点右键有腾讯的菜单标志。去除不是复杂的事,不会的就点下面的地址下载我们改好的没标志的。
http://yxxx.jysedu.com/templates/default/swf/focus.swf
然后就来实现吧。
假定在本系统中栏目id为3的是图文报道。那就先在里面发表几篇文章就是了,发文的时候关键是必须在缩略图选项中设定图片的URL,为了美观且不影响访问速度,请将图片裁剪成长450像素宽253像素后上传再贴url至缩略图地址中。
到后台,找内容管理中的栏目管理,修改栏目id为3的栏目属性。选中首页专题列表,显示数目设为5。提交,保存。
到世博官网找到以下代码:
<SCRIPT language=javascript type=text/javascript>
var titles='单日和累计客流创世博会历史新高|世博会迎来叙利亚国家馆日|瑞典馆迎来“建设者之夜”|世博会迎来伊拉克国家馆日|巴塞罗那案例馆迎来第200万名参观者';
var imgs='/quickpic/201010233503009.jpg|/quickpic/201010171740guojia.jpg|/quickpic/201010093450focusT.jpg|/quickpic/201010230058005.jpg|/quickpic/201010215745002.jpg';
var urls='/a/20101016/000030.htm|/a/20101017/000036.htm|/a/20101017/000001.htm|/a/20101016/000033.htm|/a/20101016/000036.htm';
var pw =419;
var ph = 246;
var sizes = 14;
var Times = 4000;
var umcolor = 0xFFFFFF;
var btnbg =0xFF7E00;
var txtcolor =0xFFFFFF;
var txtoutcolor = 0x000000;
var flash = new SWFObject('/images/09lh/focus1.swf', 'mymovie', pw, ph, '7', '');
flash.addParam('allowFullScreen', 'true');
flash.addParam('allowScriptAccess', 'always');
flash.addParam('quality', 'high');
flash.addParam('wmode', 'Transparent');
flash.addVariable('pw', pw);
flash.addVariable('ph', ph);
flash.addVariable('sizes', sizes);
flash.addVariable('umcolor', umcolor);
flash.addVariable('btnbg', btnbg);
flash.addVariable('txtcolor', txtcolor);
flash.addVariable('txtoutcolor', txtoutcolor);
flash.addVariable('urls', urls);
flash.addVariable('Times', Times);
flash.addVariable('titles', titles);
flash.addVariable('imgs', imgs);
flash.write('jdt');
</SCRIPT>
分析一下,别多想了,改啊,简单得很啊。
到后台,主站风格模板,找到点说明为“栏目专题Flash循环体”的变量标签NavFlashArrayLoopBody,点击详情,如果是下面的代码就不用改了(大多数Flash图片一般都用这种方式),不是就照这样贴进去就行了:
new Array("{$$LoopArticleTitle$$}","{$$LoopArticlesHrefURL$$}","{$$LoopArticlesImgURL$$}")
别忘了提交。
把世博官网的代码加几行,改成下面的这样:
<!--图片新闻切换开始 -->
<DIV id=jdt></DIV>
<SCRIPT language=javascript type=text/javascript>
var titles='';
var imgs='';
var urls='';
var imgArr = new Array({$$FlashArrayCode,3$$});
for(var i=0; i<imgArr.length; i++){
if (i==0)
{
titles+=imgArr[i][0];
urls+=imgArr[i][1];
imgs+=imgArr[i][2];
}
else
{
titles+='|'+imgArr[i][0];
urls+='|'+imgArr[i][1];
imgs+='|'+imgArr[i][2];
}
}
var pw =450;
var ph = 253;
var sizes = 14;
var Times = 4000;
var umcolor = 0xFFFFFF;
var btnbg =0xFF7E00;
var txtcolor =0xFFFFFF;
var txtoutcolor = 0x000000;
var flash = new SWFObject('/templates/default/swf/focus.swf', 'mymovie', pw, ph, '7', '');
flash.addParam('allowFullScreen', 'true');
flash.addParam('allowScriptAccess', 'always');
flash.addParam('quality', 'high');
flash.addParam('wmode', 'Transparent');
flash.addVariable('pw', pw);
flash.addVariable('ph', ph);
flash.addVariable('sizes', sizes);
flash.addVariable('umcolor', umcolor);
flash.addVariable('btnbg', btnbg);
flash.addVariable('txtcolor', txtcolor);
flash.addVariable('txtoutcolor', txtoutcolor);
flash.addVariable('urls', urls);
flash.addVariable('Times', Times);
flash.addVariable('titles', titles);
flash.addVariable('imgs', imgs);
flash.write('jdt');
</SCRIPT>
<!--图片新闻切换结束 -->
贴到风格模板的首页代码中去吧,刷新首页看看。行了,可以去睡个好觉了。
效果请看下面的网址: