jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox

jb51站长推荐的用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></SCRIPT> </head> <body><SPAN class="" id=f_now></SPAN> <TABLEstyle="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><SCRIPT language=javascript type=text/javascript> "）; 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=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）; //--> </SCRIPT> </TD></TR> </TBODY></TABLE> </body></html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]