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

　　站长推荐的用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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20language%3Djavascript%3E%20%0D%0A%3C!--%20%0D%0Afunction%20p%24(string)%7B%20%0D%0Adocument.write(string)%3B%20%0D%0A%7D%20%0D%0Afunction%20%24(id)%7B%20%0D%0Areturn%20document.getElementById(id)%3B%20%0D%0A%7D%20%0D%0Afunction%20change_menu(id%2Ccontent_id%2Cnum%2Ctotal_ztc_menu%2Cmenu_on%2Cmenu_off)%7B%20%0D%0Afor%20(var%20i%3D1%3Bi%3C%3Dtotal_ztc_menu%3Bi%2B%2B)%7B%20%0D%0A%24(id%2Bi).className%3Dmenu_off%3B%20%0D%0A%24(content_id%2Bi).style.display%3D'none'%3B%20%0D%0A%7D%20%0D%0A%24(id%2Bnum).className%3Dmenu_on%3B%20%0D%0A%24(content_id%2Bnum).style.display%3D'block'%3B%20%0D%0A%7D%20%0D%0A%2F%2F--%3E%20%0D%0A%3C%2FSCRIPT%3E"> 
</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>

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

教程首页更多教程