多瀏覽器兼容的qq圖片輪換效果javascript代碼

更新時間：2008年06月10日 12:34:58 作者：

今日發(fā)現(xiàn)qq的圖片輪換效果代碼不錯，兼容多瀏覽器，測試了ie和firefox效果不錯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js圖片輪換效果代碼_腳本之家</title> </head> <body> <TABLE class=bdc6 height=359 cellSpacing=0 cellPadding=0 width="100%"        border=0>         <TBODY>         <TR>           <TD vAlign=top>             <TABLE height=6 cellSpacing=0 cellPadding=0 width="100%" border=0>               <TBODY>               <TR>                 <TD></TD></TR></TBODY></TABLE>             <TABLE height=170 cellSpacing=0 cellPadding=0 width=150 align=center              border=0>               <TBODY>               <TR>                 <TD vAlign=top height=170>                   <div   class="rhzrrlv"   id=bimg style="WIDTH: 150px; HEIGHT: 170px">                   <div   id="1jhrrfj"   class=undis style="WIDTH: 150px; HEIGHT: 170px"><A                                        target=_blank><IMG height=170 src="/upload/20080610123614199.jpg"                    width=150></A></DIV>                   <div   id="h3tdtj5"   class=dis style="WIDTH: 150px; HEIGHT: 170px"><A                                        target=_blank><IMG height=170 src="/upload/20080610123618955.jpg"                    width=150></A></DIV>                   <div   id="bztjzhh"   class=dis style="WIDTH: 150px; HEIGHT: 170px"><A                                        target=_blank><IMG height=170 src="/upload/20080610123619426.jpg"                    width=150></A></DIV>                   </DIV></TD></TR></TBODY></TABLE>             <TABLE height=24 cellSpacing=0 cellPadding=0 width=150 align=center              border=0>               <TBODY>               <TR>                 <TD class=f14 id=info width=227>                   <div   id="njdpdrt"   class=dis>22噸重挖掘機</DIV>                   <div   id="txnptvx"   class=dis>中星九號直播</DIV>                   <div   id="zj3dbrr"   class=dis>考后表情</DIV> </TD>                 <TD width=59>                   <TABLE id=simg cellSpacing=0 cellPadding=2 width="100%"                    align=right border=0>                     <TBODY>                     <TR align=middle>                       <TD class=s>1</TD>                       <TD>2</TD>                       <TD>3</TD>                       </TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>       <SCRIPT> function $(v){return document.getElementById(v)} var img = $("bimg").getElementsByTagName("div"); var td = $("simg").getElementsByTagName("td"); var text = $("info").getElementsByTagName("div"); var now = 1; var count = 3;            //設(shè)置數(shù)量 var def = 0;            //默認(rèn)顯示 var speed = 1000;        //10秒 //initialize for(var i=0;i<count;i++){     //td     td[i].name = i;     td[i].className = "";     td[i].onclick = function (){changeBar(this.name)}     td[i].onmouseover = function(){clearAuto()}     td[i].onmouseout = function(){setAuto()}     //img       img[i].style.display = "none";     img[i].onmouseover = function(){clearAuto()}     img[i].onmouseout = function(){setAuto()}          //text      text[i].style.display = "none";     text[i].onmouseover = function(){clearAuto()}     text[i].onmouseout = function(){setAuto()} } //set default td[def].className = "s"; img[def].style.display = "block"; text[def].style.display = "block";   function setClass(v){      for(var i=0;i<count;i++)         td[i].className = "";     td[v].className = "s"; }   function setImg(v){         try{         with (bimg){             filters[0].Apply();              for(var i=0;i<count;i++){                 img[i].style.display = "none";                     text[i].style.display = "none";                 }                 img[v].style.display = "block";             text[v].style.display = "block";             filters[0].play();              }     }     catch(e){                 for(var i=0;i<count;i++){             img[i].style.display = "none";                 text[i].style.display = "none";         }                     img[v].style.display = "block";         text[v].style.display = "block";     } } //contorl changed function changeBar(v){     setClass(v);     setImg(v);     now= v+1; }  //set Auto var auto = ''; function setChange(){     if(now<count){         changeBar(now);                 }     else{         now = 0;         changeBar(now);     } } function setAuto(){auto = setInterval("setChange()", speed)} function clearAuto(){clearInterval(auto)} setAuto(); </SCRIPT> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: