代码改变世界

各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载

2007-06-07 15:01  DQ  阅读(13019)  评论(6编辑  收藏  举报
各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:

  最近看到各大门户站都有一个幻灯片特效,而且不是简单的JS特效,是FLASH和JS结合而成的觉得非常不错,今天在IT世界的原代码中查看了一下,特此发布!希望大家喜欢!有什么问题可以与我研究!

<a target=_self href="goUrl()">
                    
<span class="f14b">
                    
<script type="text/javascript">
imgUrl1
="http://www.webjx.com/img/200406301.jpg";
imgtext1
="网页教学网制作素材"
imgLink1
=escape("http://www.webjx.com/htmldata/sort/8.html");
imgUrl2
="http://www.webjx.com/img/200406302.jpg";
imgtext2
="网页教学网网页制作专区"
imgLink2
=escape("http://www.webjx.com/htmldata/sort/3.html");
imgUrl3
="http://www.webjx.com/img/200406303.jpg";
imgtext3
="网页教学网网页特效专区"
imgLink3
=escape("http://www.webjx.com/htmldata/sort/5.html");
imgUrl4
="http://www.webjx.com/img/200406304.jpg";
imgtext4
="网页教学网视频教程"
imgLink4
=escape("http://www.webjx.com/htmldata/sort/15.html");
imgUrl5
="http://www.webjx.com/img/200406305.jpg";
imgtext5
="网页教学网网页制作书籍"
imgLink5
=escape("http://www.webjx.com/htmldata/sort/7.html");

 var focus_width
=280
 var focus_height
=158
 var text_height
=18
 var swf_height 
= focus_height+text_height
 
 var pics
=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5
 var links
=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5
 var texts
=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5
 
 document.write(
'<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="'+ swf_height +'">');
 document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
 document.write(
'<param name="menu" value="false"><param name=wmode value="opaque">');
 document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
 document.write(
'<embed src="pixviewer.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" />');  document.write('</object>');
 

 
</script>
                    
</span></a><span id=focustext class=f14b> </span>

    图片幻灯片切换特效代码一、腾讯FLASH广告

    在腾讯的网站上主要有两种形式的FLASH广告,一种是带有文章标题的,如腾讯汽车频道(http:
//auto.qq.com/);另一种是不带文章标题的,如腾讯音乐频道(http://ent.qq.com/music/)。其实大部分的门户网站也都是这样的,因此下面我们不再区分这两种FLASH广告形式。

    FLASH广告的实现原理

    我们看到的门户网站的FLASH广告实现起来其实非常的容易,就是用一个成形的FLASH文件+JS脚本调用,而在门户网站中,各大主编是不屑于手动修改 JS文件的,因此在发展的后期都是将JS文件和网站本身的发布程序结合起来,通过后台的动态数据调用,自动生成调用JS文件中的图片地址、标题文字以及链接地址信息,这样就非常容易的实现这种很奇妙的效果。

    FLASH广告的优点

    原先的各大网站都是用的JS脚本调用,经过测试,在图片为3张以上的时候,就会非常占用客户端的系统资源,以致影响网站的打开速度,其实大部分原因还是因为服务器以及带宽资源跟不上,不过一些小站的站长可能并没有注意到这点。而且,FLASH文件非常的小,即使JS文件出现问题,也不会影响整体页面的打开速度,这和以前JS出现问题,影响页面打开速度的尴尬局面有很大的不同。

    腾讯汽车频道FLASH广告JS调用代码(带文章标题)
 
<!--

 var focus_width
=262
 var focus_height
=170
 var text_height
=20
 var swf_height 
= focus_height+text_height
 var pics
='图片地址一|图片地址二|图片地址三|图片地址四|图片地址五'
 var links
='链接地址一|链接地址二|链接地址三|链接地址四|链接地址五'
 var texts
='文章标题一|文章标题二|文章标题三|文章标题四|文章标题五'
 
 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="http://auto.qq.com/flash/playswf.swf"><param name="quality" value="high"><param name="bgcolor" value="#FFFFFF">');
 document.write(
'<param name="menu" value="false"><param name=wmode value="http://blog.techweb.com.cn/opaque">');
 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="http://auto.qq.com/flash/playswf.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#C5C5C5" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');  document.write('</object>');
 
 
//-->

    以上代码中,用户可以分别指出图片地址,链接地址和文章标题

    腾讯音乐频道FLASH广告JS调用代码(不带文章标题)

<!--

var focus_width
=199
var focus_height
=242
var text_height
=0
var swf_height 
= focus_height+text_height
var pics
='图片地址一|图片地址二|图片地址三|图片地址四|图片地址五'
var links
='链接地址一|链接地址二|链接地址三|链接地址四|链接地址五'
var texts
='|||'
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="http://auto.qq.com/flash/playswf.swf"><param name="quality" value="high"><param name="bgcolor" value="#FFFFFF">');
document.write(
'<param name="menu" value="false"><param name=wmode value="http://blog.techweb.com.cn/opaque">');
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="http://auto.qq.com/flash/playswf.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#C5C5C5" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');  document.write('</object>');
 
//-->

    以上代码中,用户可以分别指出图片地址,链接地址。

    图片幻灯片切换特效代码二、新浪FLASH广告

    新浪手机频道FLASH广告JS调用代码(带文章标题)

<!--

var focus_width
=277
var focus_height
=200
var text_height
=20
var swf_height 
= focus_height+text_height
 
var pics
='图片地址一|图片地址二|图片地址三|图片地址四|图片地址五'
var links
='链接地址一|链接地址二|链接地址三|链接地址四|链接地址五'
var texts
='文字标题一|文字标题二|文字标题三|文字标题四|文字标题五'
 
document.write(
'<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="'+ swf_height +'">');
document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://image2.sina.com.cn/bj/zonghe/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write(
'<param name="menu" value="false"><param name=wmode value="http://blog.techweb.com.cn/opaque">');
document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="http://image2.sina.com.cn/bj/zonghe/pixviewer.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="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write(
'</object>');
 
//-->

    我们可以看到,新浪手机频道FLASH广告JS调用代码和腾讯汽车频道FLASH广告JS调用代码完全一致,可见门户网站之间也是抄来抄去,技术是没有门户之见的。

    需要注意的是,并不是所有的FLASH广告JS调用代码都是完全一样的,也取决于FLASH文件自身的调用定义,所以如果看到其他好看的FLASH广告形式,千万不要只是保存了FLASH就完事了,花点时间分析一下代码,对自己本身也是一种成长。

    新浪彩信频道FLASH广告JS调用代码(不带文章标题)

<!--

var focus_width
=234
var focus_height
=135
var text_height
=0
var swf_height 
= focus_height+text_height

var pics
='图片地址一|图片地址二|图片地址三|图片地址四|图片地址五'
var links
='链接地址一|链接地址二|链接地址三|链接地址四|链接地址五'
var texts
='||||||'

document.write(
'<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="'+ swf_height +'">');
document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://image2.sina.com.cn/bj/zonghe/pixviewer.swf"><param name="quality" value="high"><param name="bgcolor" value="#ffffff">');
document.write(
'<param name="menu" value="false"><param name=wmode value="http://blog.techweb.com.cn/opaque">');
document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="http://image2.sina.com.cn/bj/zonghe/pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#ffffff" 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>');
 
//-->

    图片幻灯片切换特效代码三、网易FLASH广告

    网易汽车频道FLASH广告JS调用代码(不带文章标题)

<!--

var focus_width
=250;
var focus_height
=160;
var pics 
= "图片地址一|图片地址二|图片地址三|图片地址四|图片地址五|";
var links 
= "链接地址一|链接地址二|链接地址三|链接地址四|链接地址五|";
document.write(
'<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 +'">');
document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://cimg.163.com/auto/main-1.swf"><param name="quality" value="high"><param name="bgcolor" value="#D6D3D6">');
document.write(
'<param name="menu" value="false"><param name=wmode value="http://blog.techweb.com.cn/opaque">');
document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&focus_width='+focus_width+'&focus_height='+focus_height+'">');
document.write('<embed src="http://cimg.163.com/auto/main-1.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&focus_width='+focus_width+'&focus_height='+focus_height+'" menu="false" bgcolor="#D6D3D6" 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>');

//-->

    注意,细心的朋友可以看出网易汽车频道FLASH广告JS调用代码和以上门户网站的区别吗?

    图片幻灯片切换特效代码四、搜狐FLASH广告

    搜狐体育频道FLASH广告JS调用代码(带文章标题)

<!--

var focus_width
=240
var focus_height
=190
var text_height
=21
var swf_height 
= focus_height+text_height
var pics
='图片地址一|图片地址二|图片地址三|图片地址四|图片地址五'
var links
='链接地址一|链接地址二|链接地址三|链接地址四|链接地址五'
var texts
='文字标题一|文字标题二|文字标题三|文字标题四|文字标题五'
document.write(
'<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="'+ swf_height +'">');
document.write(
'<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://business.sohu.com/upload/focus.swf"> <param name="quality" value="high"><param name="bgcolor" value="#CCCCCC">');
document.write(
'<param name="menu" value="false"><param name=wmode value="http://blog.techweb.com.cn/opaque">');
document.write(
'<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">');
document.write('<embed src="http://business.sohu.com/upload/focus.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#ffffff" quality="high" width="'+ focus_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');  document.write('</object>');
 
//-->