多张图片切换效果js代码1

网站建设

<table width="300" border="1" cellpadding="0" cellspacing="0" class=font1 style="border-color:#CCCCCC;border-width:1px;border-style:solid;border-collapse:collapse;">
<tr>
<td height="25" valign="top" bgcolor="#F4F7F5">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<style type="text/css">
a{color:#000; text-decoration:none;}
a:hover{color:#ff0000; text-decoration:underline;}
.xbigon{background:url(../../Skin/Images/flashpicdotred.gif); color: #fff; width:15px; height:15px; line-height:15px;}
.xbigoff{background:url(../../Skin/Images/flashpicdotwhite.gif); color: #3f4040; width:15px; height:15px; line-height:15px;}
</style>
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<td width="260" align="center" valign="top">
<div id="xfc" style="height:214px; margin-left:auto; margin-right:auto;">
<div style="display:block;" ><a content/2009-10/17/content_995462.htm><img src="../../Skin/Images/xin_201006170919078620825.jpg" border=0 width="300" height="214" ></a></div> <div style="display:none;" ><a content/2009-10/17/content_995458.htm><img src="../../Skin/Images/xin_591006171042453251996.jpg" border="0" width="300" height="214" ></a></div> <div style="display:none;" ><a 01gmrb/2009-10/17/content_995415.htm><img src="../../Skin/Images/xin_591006171042453251996.jpg" border="0" width="300" height="214" ></a></div> <div style="display:none;" ><a content/2009-10/17/content_995463.htm><img src="../../Skin/Images/xin_591006171042453251996.jpg" border="0" width="300" height="214" ></a></div> <div style="display:none;" ><a content/2009-10/17/content_995508.htm><img src="../../Skin/Images/xin_591006171042453251996.jpg" border="0" width="300" height="214" ></a></div>
</div></td>
</tr>
<tr>
<td>
<table width="100%" height="50" border="0" cellspacing="0" cellpadding="0" bgcolor="#DCDCDC">
<tr>
<td valign="top" >
<div style="position:absolute; left:120px; top:230px;"> </div>
<div id="xcon">
<div style="display:block"> <table width="100%" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td height="24" style="font-size: 14px"><a content/2009-10/17/content_995462.htm>胡锦涛会见国际奥委会主席罗格</a></td> </tr> </table> </div> <div style="display:none"> <table width="100%" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td height="24" style="font-size: 14px"><a content/2009-10/17/content_995458.htm>第十一届全国运动会隆重开幕</a></td> </tr> </table> </div> <div style="display:none"> <table width="100%" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td height="24" style="font-size: 14px"><a 01gmrb/2009-10/17/content_995415.htm>体育的盛会 人民的节日</a></td> </tr> </table> </div> <div style="display:none"> <table width="100%" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td height="24" style="font-size: 14px"><a content/2009-10/17/content_995463.htm>甘肃:3万人共同种下3万棵树</a></td> </tr> </table> </div> <div style="display:none"> <table width="100%" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td height="24" style="font-size: 14px"><a content/2009-10/17/content_995508.htm>云南昌宁县:核桃经济富一方</a></td> </tr> </table> </div>
</div></td>
</tr>
<tr>
<td>
<table id="xnum" cellspacing="2" cellpadding="0" align="right" border="0">
<tr>
<td class="xbigon" style="font-size:12px; cursor: pointer" onClick="xMea(0);" onMouseOver="xclearAuto()" onMouseOut="xsetAuto()" align="center" width="15" height="18" id="xt0">1</td>
<td class="xbigoff" style="font-size:12px; cursor: pointer" onClick="xMea(1);" onMouseOver="xclearAuto()" onMouseOut="xsetAuto()" align="center" width="15" id="xt1">2</td>
<td class="xbigoff" style="font-size:12px; cursor: pointer" onClick="xMea(2);" onMouseOver="xclearAuto()" onMouseOut="xsetAuto()" align="center" width="15" id="xt2">3</td>
<td class="xbigoff" style="font-size:12px; cursor: pointer" onClick="xMea(3);" onMouseOver="xclearAuto()" onMouseOut="xsetAuto()" align="center" width="15" id="xt3">4</td>
<td class="xbigoff" style="font-size:12px; cursor: pointer" onClick="xMea(4);" onMouseOver="xclearAuto()" onMouseOut="xsetAuto()" align="center" width="15" id="xt4">5</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table><!–广告位–>
<script>
var m=0;
function xMea(value){
m=value;
xsetBg(value);
xplays(value);
xcons(value);

}
function xsetBg(value){
for(var i=0;i<5;i++)
if(value==i){
   document.getElementById("xt"+value+"").className=’xbigon’;
   }
else{
   document.getElementById("xt"+i+"").className=’xbigoff’;
   }
}

function xplays(value){
try
{
   with (xfc)
   {
    filters[0].Apply();
    for(i=0;i<5;i++)i==value?children[i].style.display="block":children[i].style.display="none";
    filters[0].play();
   }
}
catch(e)
{
   var divlist = document.getElementById("xfc").getElementsByTagName("div");
   for(i=0;i<5;i++)
   {
    i==value?divlist[i].style.display="block":divlist[i].style.display="none";
   }
}

}
function xcons(value){
try
{
   with (xcon)
   {
     for(i=0;i<5;i++)i==value?children[i].style.display="block":children[i].style.display="none";   
   }
}
catch(e)
{
   var divlist = document.getElementById("xcon").getElementsByTagName("div");
   for(i=0;i<5;i++)
   {
    i==value?divlist[i].style.display="block":divlist[i].style.display="none";
   }  
}
}

function xclearAuto(){clearInterval(xautoStart)}
function xsetAuto(){xautoStart=setInterval("xAuto(m)", 4000)}
function xAuto(){
m++;
if(m>4)m=0;
xMea(m);
}
function xSub(){
m–;
if(m<0)m=4;
xMea(m);
}

xsetAuto();

</script>
</td>
</tr>
</table></td>
</tr>
</table>

继续阅读