多张图片切换效果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 href=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 href=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 href=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 href=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 href=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 href=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 href=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 href=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 href=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 href=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>