答案：zhaoxi站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码 <html> <head> <STYLE type=text/css> body {margin:0 auto; padding:0; text-align:center } .box400 {margin:0 auto;padding:0;width:400px} #f_menu { MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 20px } #f_menu A { DISPLAY: block; BACKGROUND: #393939; FLOAT: left; OVERFLOW: hidden; COLOR: #fff; LINE-HEIGHT: 20px; MARGIN-RIGHT: 1px; BORDER-BOTTOM: #fff 1px solid; HEIGHT: 20px; TEXT-ALIGN: center } #f_menu A:hover { BACKGROUND: #ff8500 } #f_menu A.on { BACKGROUND: #ff8500 } #f_div { MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 200px } #f_adDiv { OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 25px } #f_imgDiv { OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 200px } #f_img { BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); BORDER-LEFT: 0px; BORDER-BOTTOM: 0px } #f_infoDiv { WIDTH: 100%; POSITION: relative; TOP: -14px } #f_buttonDiv { OVERFLOW: hidden; WIDTH: 100%; MARGIN-RIGHT: 1px; HEIGHT: 14px; TEXT-ALIGN: left } #f_line { BACKGROUND: #fff; FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100); MARGIN-LEFT: 270px; OVERFLOW: hidden; WIDTH: 130px; HEIGHT: 1px } #f_buttonDiv DIV { BACKGROUND: #fff; FLOAT: right; WIDTH: 1px; HEIGHT: 14px } #f_buttonDiv .bg { BACKGROUND: #fff; FILTER: Alpha(Opacity=40); FLOAT: right; WIDTH: 14px; HEIGHT: 14px } #f_buttonDiv A { DISPLAY: block; FONT-SIZE: 10px; FLOAT: right; OVERFLOW: hidden; WIDTH: 14px; COLOR: #fff; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center; TEXT-DECORATION: none } #f_buttonDiv A:link { COLOR: #000 } #f_buttonDiv A:visited { COLOR: #000 } #f_buttonDiv A:active { COLOR: #000 } #f_buttonDiv A:hover { BACKGROUND: #ff840c; COLOR: #fff } #f_buttonDiv A.on:link { BACKGROUND: #ff840c; COLOR: #fff } #f_buttonDiv A.on:visited { BACKGROUND: #ff840c; COLOR: #fff } #f_buttonDiv A.on:active { BACKGROUND: #ff840c; COLOR: #fff } #f_buttonDiv A.on:hover { BACKGROUND: #ff840c; COLOR: #fff } #f_buttonDiv A.on:hover { BACKGROUND: #ff6600 } #f_text { OVERFLOW: hidden; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-ALIGN: center } #f_text A:link { COLOR: #000; TEXT-DECORATION: none } #f_text A:visited { COLOR: #000; TEXT-DECORATION: none } #f_text A:active { COLOR: #000; TEXT-DECORATION: none } #f_text A:hover { COLOR: #ff6600; TEXT-DECORATION: none } </STYLE> <SCRIPT language=javascript> <!-- function p$(string){ document.write(string); } function $(id){ return document.getElementById(id); } function change_menu(id,content_id,num,total_ztc_menu,menu_on,menu_off){ for (var i=1;i<=total_ztc_menu;i++){ $(id+i).className=menu_off; $(content_id+i).style.display='none'; } $(id+num).className=menu_on; $(content_id+num).style.display='block'; } //--> </SCRIPT> </head> <body> <DIV class=box400> <DIV id=f_menu><SPAN class="" id=f_now></SPAN></DIV> <DIV id=f_div><!--图片区域--> <DIV id=f_imgDiv></DIV> <DIV id=f_infoDiv><!--数字按钮区域--> <DIV id=f_buttonDiv></DIV></DIV></DIV> <TABLE style="BORDER-RIGHT: #bcbcbc 1px solid; BORDER-TOP: #bcbcbc 1px solid; BORDER-LEFT: #bcbcbc 1px solid; BORDER-BOTTOM: #bcbcbc 1px solid" cellSpacing=1 cellPadding=0 width="100%" bgColor=#ffffff border=0> <TBODY> <TR> <TD align=middle bgColor=#efefef><!--焦点文字区域--> <DIV class=f12b id=f_text></DIV> <SCRIPT language=javascript type=text/javascript> <!-- //可修改区域 var imgWidth=400; var imgHeight=200; var _timeOut_=5000; var show_text = true; //是否显示焦点文字 var timeOut=_timeOut_; var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间 var now=0; //第一张图 var target="_blank"; //打开方式 var button_on ='on'; //当前焦点对应按钮的样式名 var button_off ='';//非当前焦点对应按钮的样式名 //不可修改区域 var imgUrl = new Array(); var imgText = new Array(); var imgLink = new Array(); var imgAlt= new Array(); var menuList = new Array();//菜单menu var ver=2; //兼容浏览器版本 默认2 为非ie var firstTime=true; var n =-1; //菜单menu menuList[++n]='内外兼修'; imgUrl[n]='http://www.pcauto.com.cn/newcar/abroad/porsche/images/picpath/070308techartl.jpg'; imgText[n]='内外兼修 TechArt改装600匹卡宴Turbo'; imgLink[n]='http://www.pcauto.com.cn/newcar/abroad/porsche/0703/430540.html'; imgAlt[n]='内外兼修 TechArt改装600匹卡宴Turbo'; //菜单menu menuList[++n]='新福克斯'; imgUrl[n]='http://www.pcauto.com.cn/nation/brand/changanford/images/picpath/07kuanfukesi4002000309.jpg'; imgText[n]='07款福特福克斯上市 售价12.98-16.58万'; imgLink[n]='http://www.pcauto.com.cn/nation/brand/changanford/0703/430704.html'; imgAlt[n]='07款福特福克斯上市 售价12.98-16.58万'; //菜单menu menuList[++n]='悍马姐妹'; imgUrl[n]='http://www.pcauto.com.cn/community/carnbeauty/images/picpath/8_mthwoei4.jpg'; imgText[n]='捍马车展的孪生姐妹 超酷'; imgLink[n]='http://piclib.pcauto.com.cn/piclib/x_index.jsp'; imgAlt[n]='捍马车展的孪生姐妹 超酷'; //菜单menu menuList[++n]='脱衣秀'; imgUrl[n]='http://www.pcauto.com.cn/news/yjpl/medium/images/picpath/lishufu-a98sudfoa.jpg'; imgText[n]='吉利李书福委员脱衣秀国货 呼吁支持国货'; imgLink[n]='http://www.pcauto.com.cn/news/yjpl/medium/0703/430599.html'; imgAlt[n]='吉利李书福委员脱衣秀国货 呼吁支持国货'; //菜单menu menuList[++n]='养路费'; imgUrl[n]='http://www.pcauto.com.cn/news/hyxw/images/picpath/yanglufei-400200-809asudfol.jpg'; imgText[n]='人大代表建议全国统一养路费征收法规'; imgLink[n]='http://www.pcauto.com.cn/news/hyxw/0703/430739.html'; imgAlt[n]='人大代表建议全国统一养路费征收法规'; //菜单menu menuList[++n]='大发'; imgUrl[n]='http://www.pcauto.com.cn/nation/brand/other/images/picpath/8E026BA4D70309400200.jpg'; imgText[n]='大发国产小车年中上市 1.3和1.5两种排量'; imgLink[n]='http://www.pcauto.com.cn/nation/brand/other/0703/430723.html'; imgAlt[n]='大发国产小车年中上市 1.3和1.5两种排量'; var count=0; for (var i=0;i<imgUrl.length;i++) { if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) { count++; } else { break; } } //重写css var each_width=Math.ceil((imgWidth-(count-1))/count); var last_width=imgWidth-each_width*(count-1)-(count)+1; p$("<style>"); p$("<!--"); p$("#f_menu a{width:"+each_width+"px;}"); p$("#f_menu #f_menu"+(count-1)+"{width:"+last_width+"px; margin:0;}"); p$("-->"); p$("</style>"); function change(){ if (ver==1){ with($('f_img').filters[0]){ Transition=1; apply(); play(); } } if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;} else{ $('f_img').src=imgUrl[now]; $('f_img').alt=imgAlt[now]; $('f_imgLink').href=>=imgUrl.length-1)?0:now+1; timeOut=_timeOut_; } theTimer=setTimeout("change()", timeOut); } function b_change(num){ window.clearInterval(theTimer); now=num; firstTime=false; change(); } //draw 渐变line （即css:f_line) function draw_line(){ var div = document.createElement("div"); div.id = 'f_line'; $('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0)); } //表现层 start //menu for(var i=0;i<count;i++){ var menu = document.createElement("a"); //menu.className="f_menu"+i; menu.id="f_menu"+i; menu.href='#'; menu.value=i; menu.onmouseover=function(){b_change(this.value);}; menu.title=imgAlt[i]; menu.innerHTML=menuList[i]; $('f_menu').appendChild(menu); } //图片 v</pre><p>上一个：<a href="/show/d83a3dcff2898f48.htm">可以文本显示的公告栏的js代码</a><br/>下一个：<a href="/show/3bd929877c3edfcf.htm">网页中实现浏览器的最大，最小化和关闭按钮</a></p><div class="piclist">更多图片编程知识:<ul><li><a href="/show/b95d33b0da198f46.htm"><img src='/upload/2013111519/20120924092652343.png' width=105 height=105><br/>Extjs4---Uncaught TypeError: Cannot call method 'apply' of undefined</a></li><li><a href="/show/b49b6c2726ee720a.htm"><img src='/upload/2013111520/20121210045050474.jpg' width=105 height=105><br/>基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js</a></li><li><a href="/show/acaf24c96ebef96f.htm"><img src='/upload/20121013/30_160954_domranges1.gif' width=105 height=105><br/>Javascript标准DOM Range操作全集第1/3页</a></li><li><a href="/show/ddce70e7eccb866c.htm"><img src='/upload/2013111604/20121230113800532.png' width=105 height=105><br/>复习之Jsp详解</a></li><li><a href="/show/b6b488bbcb5abf24.htm"><img src='/upload/2013111604/2008052123272603.gif' width=105 height=105><br/>轻松使用JSP生成饼图</a></li><li><a href="/show/24c3842df137c44d.htm"><img src='/upload/2013111520/20120820085042331.png' width=105 height=105><br/>一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目</a></li></ul></div></div> <div class="zykmore"><script type="text/javascript" src="/js/s4.js"></script></div><div class="more"><dl><dt>更多<a href="/list/7_1.htm">JS</a>疑问解答：</dt><dd><a target="_blank" href="/show/31f300d314d4c0d3.htm">几个验证11位手机号码格式的js代码</a></dd><dd><a target="_blank" href="/show/7d909e714c0774e2.htm">js如何获得FCKeditor控件的值</a></dd><dd><a target="_blank" href="/show/b4327bdd4ebbebcb.htm">用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...</a></dd><dd><a target="_blank" href="/show/cbcc4d7336496819.htm">JS验证，这块“牛皮”反复修改都不能实现</a></dd><dd><a target="_blank" href="/show/cb91bc419542ce9f.htm">在JS中使用DOM模型</a></dd><dd><a target="_blank" href="/show/897f78948b91f031.htm">如何用JS 获取本地文件夹的文件列表</a></dd><dd><a target="_blank" href="/show/58cf22df63d3344a.htm">js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？</a></dd><dd><a target="_blank" href="/show/b1e97b258c9ed0b3.htm">求实现自动生成图片缩略图的JS代码</a></dd><dd><a target="_blank" href="/show/59e5b8e1f4421028.htm">JS脚本网页问题</a></dd><dd><a target="_blank" href="/show/2c3f71b731258761.htm">js，代码中"object"和"Object"区别？</a></dd><dd><a target="_blank" href="/show/b281b7d5eabf3339.htm">js+flash实现网页图片切换效果，出现边框，单击激活此控件。</a></dd><dd><a target="_blank" href="/show/3aa8e41c89689f54.htm">JS怎样操作PHP中的参数</a></dd><dd><a target="_blank" href="/show/b4b8714c029b37a6.htm">js 怎么在一打开页面就加载这个函数。</a></dd><dd><a target="_blank" href="/show/8c57097425b52fc7.htm">Date.parse()的问题(js)</a></dd><dd><a target="_blank" href="/show/012152bfb53fdf04.htm"><script src="/{maxcms:sitepath}js/common.js"></script>是什么意思</a></dd></dl></div> </div> <div id="zykleft"> <div class="leftm"> <div id="logo"><a href="http://www.zzzyk.com/">站长资源库</a> <div class="clear"></div><script type="text/javascript" src="/js/i7f.js"></script></div> <script type="text/javascript" src="/js/sharen.js"></script><div class="clear"></div> <dl class="list"><dd><a href="/list/1_1.htm">asp</a></dd><dd><a href="/list/2_1.htm">php</a></dd><dd><a href="/list/3_1.htm">Delphi</a></dd><dd><a href="/list/4_1.htm">Matlab</a></dd><dd><a href="/list/5_1.htm">JSP</a></dd><dd><a href="/list/6_1.htm">Foxpro</a></dd><dd><a href="/list/7_1.htm">JS</a></dd><dd><a href="/list/8_1.htm">C/C++</a></dd><dd><a href="/list/9_1.htm">C#/ASP.NET</a></dd><dd><a href="/list/10_1.htm">VC++</a></dd><dd><a href="/list/11_1.htm">JAVA</a></dd><dd><a href="/list/12_1.htm">VB</a></dd><dd><a href="/list/13_1.htm">汇编语言</a></dd><dd><a href="/list/20_1.htm">html/css</a></dd><dd><a href="/list/21_1.htm">CGI</a></dd><dd><a href="/list/23_1.htm">XML/UML</a></dd><dd><a href="/list/24_1.htm">wap</a></dd><dd><a href="/list/27_1.htm">网站相关</a></dd><dd><a href="/list/60_1.htm">网页素材</a></dd><dd><a href="/list/70_1.htm">python</a></dd></dl><dl class="notice">如果你遇到<a href="/default.htm">编程学习</a>难题：<br/>请访问www.zzzyk.com 试试</dl> </div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s5.js"></script></dt></dl></div> <div class="leftm"><dl><dt><script type="text/javascript" src="/js/s6.js"></script></dt></dl></div> </div></div> <div class="clear"></div> <div class="bdshare"> <script type="text/javascript" src="/js/share.js"></script> </div> <div class="clear"></div> <div class="foot">CopyRight © 2012 站长网 编程知识问答 <a href="http://www.zzzyk.com">www.zzzyk.com</a> All Rights Reserved<br/>部份技术文章来自网络，<script type="text/javascript" src="/images/my.js"></script> </div> </body> </html>