JB51 webmaster recommended by using JS Browser-supported image rotation display effect in Ie,firefox and test everything is normal, we recommend that everyone should use such a good compatibility code
<ptml> <pead> <style type=text/css> body {margin:0 auto; padding:0 Text-align:center}. box400 {ma rgin: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_butt Ondiv 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.writ E (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> </pead> <body> <div class=box400> <div id=f_menu><span class= " "Id=f_now></span></div> <div id=f_div><!--picture area--> <div id=f_imgdiv></div> <div id=f_infodiv><!--Digital button area--> <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 ><!--Focus text Area--> <div class=f12b id=f_text>< ;/div> <script language=javascript type=text/javascript> <!--//modifiable region Var imgwidth=400; var imgheight=200; var _timeout_=5000; var show_text = true; Whether to display focus text Var Timeout=_timeout_; var timeout2=_timeout_/2;//onmousEout img After the need to switch time Var now=0; The first picture var target= "_blank"; Open mode var button_on = ' on '; The style name of the current focus corresponding button, var button_off = ';//non-current focus corresponding button's style name//not modifiable region var imgurl = new Array (); var imgtext = new Array (); var imglink = new Array (); var imgalt= new Array (); var menulist = new Array ();//Menu ver=2 var; Compatible browser version default 2 is non ie var firsttime=true; var n =-1; Menu Menulist[++n]= ' both inside and outside '; imgurl[n]= ' yun_qi_img/070308techartl.jpg '; Imgtext[n]= ' inside and outside repair TechArt modified 600 cayenne turbo '; imglink[n]= ' http://www.pcauto.com.cn/newcar/abroad/porsche/0703/430540.html '; Imgalt[n]= ' inside and outside repair TechArt modified 600 cayenne turbo '; Menu menulist[++n]= ' new Fox '; imgurl[n]= ' yun_qi_img/07kuanfukesi4002000309.jpg '; imgtext[n]= ' 07 Ford Fox listed Price 12.98-165800 '; imglink[n]= ' http://www.pcauto.com.cn/nation/brand/changanford/0703/430704.html '; imgalt[n]= ' 07 Ford Fox listed Price 12.98-165800 '; Menu menulist[++n]= ' Hummer Sisters '; imgurl[n]= ' yun_qi_img/'; Imgtext[n]= ' The twin sister of the carriage show is super cool '; Imglink[n]= ' Http://piclib.pcauto.com.cn/piclib/x_index.jsp '; Imgalt[n]= ' The twin sister of the carriage show is super cool '; Menu menulist[++n]= ' strip show '; imgurl[n]= ' yun_qi_img/lishufu-a98sudfoa.jpg '; Imgtext[n]= ' Li Shufu, a member of the strip show, called for support for domestic goods '; imglink[n]= ' http://www.pcauto.com.cn/news/yjpl/medium/0703/430599.html '; Imgalt[n]= ' Li Shufu, a member of the strip show, called for support for domestic goods '; Menu menulist[++n]= ' road tolls '; imgurl[n]= ' yun_qi_img/yanglufei-400200-809asudfol.jpg '; Imgtext[n]= ' deputies recommend the national reunification of road tolls levy regulations '; imglink[n]= ' http://www.pcauto.com.cn/news/hyxw/0703/430739.html '; Imgalt[n]= ' deputies recommend the national reunification of road tolls levy regulations '; Menu menulist[++n]= ' Dafa '; imgurl[n]= ' yun_qi_img/8e026ba4d70309400200.jpg '; Imgtext[n]= ' Dafa domestic car in the year listed 1.3 and 1.5 of two emissions '; imglink[n]= ' http://www.pcauto.com.cn/nation/brand/other/0703/430723.html '; Imgalt[n]= ' Dafa domestic car in the year listed 1.3 and 1.5 of two emissions '; var count=0; for (Var i=0;i "); 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=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 Gradient Line (that is, css:f_line) function Draw_line () {var div = document.createelement ("div"); div.id = ' f_line '; $ (' F_infodiv '). InsertBefore (div,$ (' F_infodiv '). Childnodes.item (0)); }//Performance layer 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); //Picture 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); Numeric button 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]; Presentation layer End $ (' f_img '). Onmouseover=function () {window.clearinterval (thetimer);} $ (' f_img '). Onmouseout=function () {thetimer=settimeout ("Change ()", TimeOut2);} try{//Filter version 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></DIV> </body></ptml >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
