posts - 15,  comments - 8,  trackbacks - 0

现在各大门户网站的新闻、

游戏、体育、软硬件等页面都有一个类似Flash播放器的动态图片切换效果,

就是一张张的焦点新闻大图不断切换,图片下面的文字也随着图片的切换而变化,

而且我们还可以手动点击图片下面的“1、2、3、4”等手动切换,效果相当不错,让页面顿时生色。

例如:http://games.sina.com.cn/ 新浪游戏频道
http://sports.sohu.com/ 搜狐体育频道
http://www.yesky.com/ 天极网首页

细心的朋友可能发现,当我们在这个图片上面单击右键的时候就会发现他是一个Flash格式,

很多朋友以为他真是一个Flash,其实它是一个javascript+XML的特效,

外加一个Flash外壳,通过javascript动态读取XML中的数据,时刻能自动更新图片和图片的标题。

下面给出代码供大家参考。其中的focus.swf需要到网上去下载, 下载地址:http://www.webjx.com/js/focus.swf

<script type="text/javascript">
<!--
imgUrl1="图片链接地址1";
imgtext1="图片文字显示内容1"
imgLink1=escape("链接网页地址1");
imgUrl2="图片链接地址2";
imgtext2="图片文字显示内容2"
imgLink2=escape("链接网页地址2");
imgUrl3="图片链接地址3";
imgtext3="图片文字显示内容3"
imgLink3=escape("链接网页地址3");


var focus_width=180//图片宽
var focus_height=220//图片高
var text_height=18//文字显示高度
var swf_height = focus_height+text_height

var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3
var links=imgLink1+"|"+imgLink2+"|"+imgLink3
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3

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="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>

posted on 2008-07-04 20:41 lvq810 阅读(444) 评论(0)  编辑  收藏 所属分类: Html/JavaScript/Ajax

只有注册用户登录后才能发表评论。


网站导航: