您的位置：首页 > 运维架构 > 网站架构

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

2009-12-15 08:44 1291 查看

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

<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调用代码（带文章标题）


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

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



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

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

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



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

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

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



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

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



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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航