图片切换效果

    <style type="text/css">
    .bigon{background:url(http://mat1.qq.com/ent/ent2007/ent2-04.gif);color:#C9000E;}
    .bigoff{background:url(http://mat1.qq.com/ent/ent2007/ent2-03.gif);color:#3C3C3C;}
    </style>
    <table width="332" border="0" align="center" cellpadding="0" cellspacing="1">
            <tr>
              <td width="330" style="border:1px solid #4F4F4F;"><div id="fc" style="width:328px;height:240px;filter:progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 );">

<div style="display:block;">
<a href="http://ent.qq.com/a/20080602/000014.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06021.jpg" width="328" height="240" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>

<div style="display:none;">
 <a href="http://ent.qq.com/a/20080602/000018.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06022.jpg" width="328" height="240" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>

<div style="display:none;">
<a href="http://ent.qq.com/a/20080602/000053.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06023.jpg" width="328" height="240" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>

<div style="display:none;">
 <a href="http://ent.qq.com/a/20080602/000108.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06026.jpg" width="328" height="240" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>

<div style="display:none;">
<a href="http://ent.qq.com/a/20080602/000048.htm" target="_blank"><img src="http://mat1.qq.com/ent/upday2008/06024.jpg" width="328" height="240" border="0" onMouseOver="clearAuto();" onMouseOut="setAuto()" /></a></div>

   </div>
</td>
            </tr>
            <tr>
              <td height="31" background="http://mat1.qq.com/ent/ent2007/ent2-02.gif"><table width="328" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="228" align="center"  onmouseover="clearAuto();" onMouseOut="setAuto()"><div id="con">

<div style="display:block;">
 <a href="http://ent.qq.com/a/20080602/000014.htm" target="_blank" class="bla">关爱行动大汇演群星闪耀 刘德华高呼赈灾</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080602/000018.htm" target="_blank" class="bla">莫文蔚受任三峡传圣火 成最珍贵生日礼物</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080602/000053.htm" target="_blank" class="bla">救助震灾孩子来京 李亚鹏夫妇带女儿探望</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080602/000108.htm" target="_blank" class="bla">《功夫熊猫》首映 杰克·布莱克秀武功</a></div>
<div style="display:none;">
<a href="http://ent.qq.com/a/20080602/000048.htm" target="_blank" class="bla">五月天实现和歌迷的承诺 香港开唱破纪录</a></div>

                </div></td>
                    <td width="100"><table width="83" border="0" align="center" cellpadding="0" cellspacing="3" class="lhn" id="num">
                        <tr>
                          <td width="13" height="19" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-04.gif" class="bigon" onclick="Mea(0);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">1</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="Mea(1);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">2</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="Mea(2);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">3</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="Mea(3);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">4</td>
                          <td width="13" align="center" background="http://mat1.qq.com/ent/ent2007/ent2-03.gif" class="bigoff" onclick="Mea(4);" onmouseover="clearAuto();" onmouseout="setAuto()" style="cursor:pointer;">5</td>
                        </tr>
                    </table></td>
                  </tr>
              </table></td>
            </tr>
          </table>
 <script>
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
 n=value;
 setBg(value);
 plays(value);
 cons(value);
 }
function setBg(value){
 for(var i=0;i<5;i++)
   if(value==i){
  showNum.getElementsByTagName("td")[i].className='bigon';
  }
 else{ 
  showNum.getElementsByTagName("td")[i].className='bigoff';
  } 
 }
function plays(value){
 with (fc){
  filters[0].Apply();
  for(i=0;i<5;i++)i==value?children[i].style.display="block":children[i].style.display="none";
  filters[0].play();   
  }
 
}
function cons(value){
with (con){

  for(i=0;i<5;i++)i==value?children[i].style.display="block":children[i].style.display="none";
   
  }

}

function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto(){
 n++;
 if(n>4)n=0;
 Mea(n);
}
function sub(){
 n--;
 if(n<0)n=4;
 Mea(n);
}
setAuto();

</script>