jb51站長推薦的用js實現(xiàn)的多瀏覽器支持的圖片輪換展示效果ie,firefox

更新時間：2007年03月13日 00:00:00 作者：

jb51站長推薦的用js實現(xiàn)的多瀏覽器支持的圖片輪換展示效果在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   id="y7qlrsz"   class=box400> <div   class="nam8wxp"   id=f_menu><span id="t7gmiuc"    class="" id=f_now></SPAN></DIV> <div   class="qnluipx"   id=f_div> <div   class="ykwgsqe"   id=f_imgDiv></DIV> <div   class="7xjnpli"   id=f_infoDiv> <div   class="sxam2vw"   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   id="f7722oh"   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));             } //表現(xiàn)層 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); //數(shù)字按鈕 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]; //表現(xiàn)層 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 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

jb51站長推薦的用js實現(xiàn)的圖片輪換展示效果

非常漂亮的JS代碼經典廣告
非常漂亮的JS代碼經典廣告...
2007-10-10
JavaScript 圖片預覽效果推薦
隨著瀏覽器安全性的提高，要實現(xiàn)圖片預覽也越來越困難。不過群眾的智慧是無限的，網(wǎng)上也有很多變通或先進的方法來實現(xiàn)。在研究了各種預覽方法后，作為總結，寫了這個程序，跟大家一起分享。
2009-12-12
JS 圖片縮放效果代碼
現(xiàn)在許多網(wǎng)站上都有圖片的自由放大和縮小功能。這里的代碼并不好，適合開始學習js朋友。更多更好的代碼，可以搜索腳本之家以前的文章。
2010-06-06
最簡單的js圖片切換效果實現(xiàn)代碼
最簡單的js圖片切換效果實現(xiàn)代碼，需要的朋友可以參考下。
2011-09-09
多瀏覽器兼容的qq圖片輪換效果javascript代碼
今日發(fā)現(xiàn)qq的圖片輪換效果代碼不錯，兼容多瀏覽器，測試了ie和firefox效果不錯
2008-06-06
點圖片上一頁下一頁翻頁效果
實現(xiàn)圖片翻頁效果實例代碼
2008-07-07
多圖展示滑動過渡效果
多圖展示滑動過渡效果...
2006-12-12
js 圖片上傳前大小長寬驗證代碼
今天整理了一段代碼，用于圖片上傳前預覽，并獲取圖片的長、寬、及字節(jié)數(shù)，可以用于圖片上傳前的校驗。
2010-03-03
DHTML Slide Show script圖片輪換
2008-03-03
javascript實現(xiàn)的一個圖片轉移效果
javascript實現(xiàn)的一個圖片轉移效果...
2007-06-06