首页 > 网络编程 > JavaScript > 网页特效 > 图象特效 > javascript 图片轮换

多浏览器兼容的qq图片轮换效果javascript代码

2008-06-10 12:34:58 作者：

今日发现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 id=bimg style="WIDTH: 150px; HEIGHT: 170px"> 
                  <DIV class=undis style="WIDTH: 150px; HEIGHT: 170px"><A  
                  href="http://news.qq.com/a/20080610/000271.htm"  
                  target=_blank><IMG height=170 src="/upload/20080610123614199.jpg"  
                  width=150></A></DIV> 
                  <DIV class=dis style="WIDTH: 150px; HEIGHT: 170px"><A  
                  href="http://news.qq.com/a/20080609/001999.htm"  
                  target=_blank><IMG height=170 src="/upload/20080610123618955.jpg"  
                  width=150></A></DIV> 
                  <DIV class=dis style="WIDTH: 150px; HEIGHT: 170px"><A  
                  href="http://news.qq.com/a/20080609/001901.htm"  
                  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 class=dis>22吨重挖掘机</DIV> 
                  <DIV class=dis>中星九号直播</DIV> 
                  <DIV 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;            //设置数量 
var def = 0;            //默认显示 
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需刷新才能执行]

多浏览器兼容的qq图片轮换效果javascript代码

您可能感兴趣的文章: