页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 图象特效 → 正文内容

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

发布：dxy 字体：[增加减小] 类型：转载

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> 
<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> 
"); 
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></DIV> 
</body></html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：jb51站长推荐的用js实现的图片轮换展示效果