jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码 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 } <!-- 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'; } //--> <!-- //可修改区域 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]='<a href="http://www.pcauto.com.cn/newcar/abroad/porsche/0703/430540.html" target="_blank">内外兼修 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]='<a href="http://www.pcauto.com.cn/nation/brand/changanford/0703/430704.html" target="_blank">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]='<a href="http://piclib.pcauto.com.cn/piclib/x_index.jsp" target="_blank">捍马车展的孪生姐妹 超酷'; 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]='<a href="http://www.pcauto.com.cn/news/yjpl/medium/0703/430599.html" target="_blank">吉利李书福委员脱衣秀国货 呼吁支持国货'; 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]='<a href="http://www.pcauto.com.cn/news/hyxw/0703/430739.html" target="_blank">人大代表建议全国统一养路费征收法规'; 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]='<a href="http://www.pcauto.com.cn/nation/brand/other/0703/430723.html" target="_blank">大发国产小车年中上市 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$(""); 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=imgLink[now]; if (show_text) $('f_text').innerHTML=imgText[now]; for (var i=0;i<count;i++) { $('b'+i).className="button"; $('f_menu'+i).className=""; } $('b'+now).className="on"; $('f_menu'+now).className="on"; now=(now>=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); } //图片 var a = document.createElement("a"); a.id="f_imgLink"; a.target=target; a.href=imgLink[now]; $('f_imgDiv').appendChild(a); var img = document.createElement("img"); img.id="f_img"; img.width=imgWidth; img.height=imgHeight; img.src=imgUrl[now]; img.alt=imgAlt[now]; a.appendChild(img); //数字按钮 for (var i=count-1;i>=0;i--){ var div_bg = document.createElement("div"); div_bg.id = 'div_bg'+i; div_bg.className='bg'; $('f_buttonDiv').appendChild(div_bg); var a = document.createElement("a"); a.id = 'b'+i; a.className = (i==now+1)?"button_on":"button_off"; a.title=imgAlt[i]; a.innerHTML=i+1; a.href='javascript:b_change('+i+')'; $('div_bg'+i).appendChild(a); var div= document.createElement("div"); $('f_buttonDiv').appendChild(div); } if (show_text) $('f_text').innerHTML = imgText[now]; //表现层 end $('f_img').onmouseover=function(){window.clearInterval(theTimer);} $('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);} try{ //滤镜版本 new ActiveXObject("DXImageTransform.Microsoft.Fade"); $('f_img').filters[0].play(); ver=1; draw_line(); } catch (e){ver=2;} var theTimer = setTimeout("change()", _timeOut_/1000); //--> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]