上一篇
下一篇
06-06
19
各大网站的Flash动态图片切换效果--类似搜狐体育和新浪游戏
作者:水寒 日期:2006-06-19
现在各大门户网站的新闻、游戏、体育、软硬件等页面都有一个类似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中的数据，时刻能自动更新图片和图片的标题。经过对比几个，因为大多数个人网站没有必要频繁更新图片，为简化起见，下面我只把用javascript来显示给定的图片的代码写出来，供大家参考，至于用javascript读取XML数据，后台动态写入XML数据的过程暂时省略，等有时间我在写出来。
点击下载此文件
文章来自: 
引用通告: 
Tags: 评论: 12 | 引用: 8711 | 查看次数: -
回复
love[2008-11-20 05:27 PM | 
]love it
引用来自 dsa请问下在具体看幻灯片时,每个图片转换间的马赛克效果是怎么做到的?而且每张图的大小都是字节,水寒能不能解释下啊?我没搞明白
这个幻灯的边框是去不了的是吗？现在要求做圆角！所以只能吧直角的边框去了！吧图片切成圆角了！边框能去掉吗？下面标题栏里的要是加样式的话该咱们加？比如说我给他加line-height该怎么加？谢谢！ 
请问有没有用javascript读取XML数据，后台动态写入XML数据源代码，有的话可以发给我吗？我的邮箱是zjblove2002@163.com谢谢了。
<span class="f14b">
<script type="text/javascript">
imgUrl1="images/01.jpg"; //图片连接
imgtext1="连接文字1" //图片对应网址连接
imgLink1=escape("连接地址");
imgUrl2="images/02.jpg";
imgtext2="连接文字2"
imgLink2=escape("连接地址");
imgUrl3="images/03.jpg";
imgtext3="连接文字3"
imgLink3=escape("连接地址");
imgUrl4="images/04.jpg";
imgtext4="连接文字4"
imgLink4=escape("连接地址");
imgUrl5="images/05.jpg";
imgtext5="连接文字5"
imgLink5=escape("连接地址");
var focus_width=200
var focus_height=350
var text_height=20
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="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>
-------------------------------------------------------------------
另外还要到那些网站去下载那个"focus.swf"文件回来放一起,要不用不了的.
<script type="text/javascript">
imgUrl1="images/01.jpg"; //图片连接
imgtext1="连接文字1" //图片对应网址连接
imgLink1=escape("连接地址");
imgUrl2="images/02.jpg";
imgtext2="连接文字2"
imgLink2=escape("连接地址");
imgUrl3="images/03.jpg";
imgtext3="连接文字3"
imgLink3=escape("连接地址");
imgUrl4="images/04.jpg";
imgtext4="连接文字4"
imgLink4=escape("连接地址");
imgUrl5="images/05.jpg";
imgtext5="连接文字5"
imgLink5=escape("连接地址");
var focus_width=200
var focus_height=350
var text_height=20
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="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>
-------------------------------------------------------------------
另外还要到那些网站去下载那个"focus.swf"文件回来放一起,要不用不了的.
你好，我现在用了您的代码，不过第一张图片显示不出来怎么办啊？是不是flash的原因呢？等带你的回答。
我加您qq了，不知道您平时什么时候在线
我qq3765139
我加您qq了，不知道您平时什么时候在线
我qq3765139
感谢！！！
引用来自 nf20082版主网站做的非常好看, 我也很想弄个这个样子的网站, 把源码发到我的邮箱: mf2008@163.com, 好吗, 谢谢!
我用的是PJblog，程序也不是我写的，呵呵~ 请到PJBlog官方站下载。http://www.pjhome.net/
版主网站做的非常好看, 我也很想弄个这个样子的网站, 把源码发到我的邮箱: mf2008@163.com, 好吗, 谢谢!
发表评论
