phper 发表于 2007-7-23 18:59:15

图片幻灯片切换特效代码

现在各大门户网站的新闻、游戏、体育、软硬件等页面都有一个类似Flash播放器的动态图片切换效果，就是一张张的焦点新闻大图不断切换，图片下面的文字也随着图片的切换而变化，而且我们还可以手动点击图片下面的“1、2、3、4”等手动切换，效果相当不错，让页面顿时生色。 <br /><br />　　例如：http://games.sina.com.cn/　　　新浪游戏频道 <br />　　　　　http://sports.sohu.com/　　　　 搜狐体育频道 <br />　　　　 http://www.yesky.com/　　　　　天极网首页 <br /><br />　　细心的朋友可能发现，当我们在这个图片上面单击右键的时候就会发现他是一个Flash格式，很多朋友以为他真是一个Flash，其实它是一个javascript+XML的特效，外加一个Flash外壳，通过javascript动态读取XML中的数据，时刻能自动更新图片和图片的标题。下面给出代码供大家参考。其中的focus.swf需要到网上去下载， 下载地址：http://www.webjx.com/js/focus.swf <br /><br />代码如下: <br /><br /><br /><br />&lt;script type=&quot;text/javascript&quot;&gt; <br />&lt;!--<br />imgUrl1=&quot;图片链接地址1&quot;; <br />imgtext1=&quot;图片文字显示内容1&quot; <br />imgLink1=escape(&quot;链接网页地址1&quot;); <br />imgUrl2=&quot;图片链接地址2&quot;; <br />imgtext2=&quot;图片文字显示内容2&quot; <br />imgLink2=escape(&quot;链接网页地址2&quot;); <br />imgUrl3=&quot;图片链接地址3&quot;; <br />imgtext3=&quot;图片文字显示内容3&quot; <br />imgLink3=escape(&quot;链接网页地址3&quot;); <br /><br /><br /> var focus_width=180//图片宽 <br /> var focus_height=220//图片高 <br /> var text_height=18//文字显示高度 <br /> var swf_height = focus_height+text_height <br /><br /> var pics=imgUrl1+&quot;|&quot;+imgUrl2+&quot;|&quot;+imgUrl3 <br /> var links=imgLink1+&quot;|&quot;+imgLink2+&quot;|&quot;+imgLink3 <br /> var texts=imgtext1+&quot;|&quot;+imgtext2+&quot;|&quot;+imgtext3 <br /><br /> document.write(&#39;&lt;object classid=&quot;clsid:d27cdb6e-ae6d-11cf-96b8-444553540000&quot; codebase=&quot;http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0&quot; width=&quot;&#39;+ focus_width +&#39;&quot; height=&quot;&#39;+ swf_height +&#39;&quot;&gt;&#39;); <br /> document.write(&#39;&lt;param name=&quot;allowScriptAccess&quot; value=&quot;sameDomain&quot;&gt;&lt;param name=&quot;movie&quot; value=&quot;focus.swf&quot;&gt;&lt;param name=&quot;quality&quot; value=&quot;high&quot;&gt;&lt;param name=&quot;bgcolor&quot; value=&quot;#F0F0F0&quot;&gt;&#39;); <br /> document.write(&#39;&lt;param name=&quot;menu&quot; value=&quot;false&quot;&gt;&lt;param name=wmode value=&quot;opaque&quot;&gt;&#39;); <br /> document.write(&#39;&lt;param name=&quot;FlashVars&quot; value=&quot;pics=&#39;+pics+&#39;&links=&#39;+links+&#39;&texts=&#39;+texts+&#39;&borderwidth=&#39;+focus_width+&#39;&borderheight=&#39;+focus_height+&#39;&textheight=&#39;+text_height+&#39;&quot;&gt;&#39;); <br /> document.write(&#39;&lt;embed src=http://www.zyhuwai.com/&quot;pixviewer.swf&quot; wmode=&quot;opaque&quot; FlashVars=&quot;pics=&#39;+pics+&#39;&links=&#39;+links+&#39;&texts=&#39;+texts+&#39;&borderwidth=&#39;+focus_width+&#39;&borderheight=&#39;+focus_height+&#39;&textheight=&#39;+text_height+&#39;&quot; menu=&quot;false&quot; bgcolor=&quot;#F0F0F0&quot; quality=&quot;high&quot; width=&quot;&#39;+ focus_width +&#39;&quot; height=&quot;&#39;+ focus_height +&#39;&quot; allowScriptAccess=&quot;sameDomain&quot; type=&quot;application/x-shockwave-flash&quot; pluginspage=&quot;http://www.macromedia.com/go/getflashplayer&quot; /&gt;&#39;);document.write(&#39;&lt;/object&gt;&#39;); <br />&lt;/script&gt; <br /> &nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt; <br />&lt;/html&gt;
页: [1]
查看完整版本: 图片幻灯片切换特效代码