这是我从qq新闻上找到的js图片循环播放，以前也做过，不过感觉没有这个简单明了，当然会了他这种思想后，自己可以自由发挥，作出更绚丽的效果，也不单单局限于做图片展示，Tab菜单也可以，反正自由发挥了，觉他还是有价值的，做了些注释就放到空间吧，以后有可能用的到，图片还都是qq的，另存为html 可以看效果。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.bigon {
border:1px solid #D1D7DD;
color:#FFF;
background:#657A8B;
}
.bigoff {
border:1px solid #D1D7DD;
color:#203846;
background:#E8ECF0;
}
</style>
</head>
<body>
<table width="292" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="292" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="fcbb" style="FILTER:progid:DXImagetransform.Microsoft.Fade (duration=0.5,overlap=1.0); border:1px solid #D6D6D6; 290px; height:209px;margin-left:auto; margin-right:auto;">
<div style="display:block"> <a href="http://news.qq.com/a/20091122/000574_18.htm" target=_blank><img onMouseOver="clearAutobb();" onMouseOut="setAutobb()" src="http://img1.gtimg.com/news/pics/24269/24269934.jpg" width="285" height="209" border=0></a></div>
<div style="display:none"> <a href="http://news.qq.com/a/20091122/001253.htm" target=_blank><img onMouseOver="clearAutobb();" onMouseOut="setAutobb()" src="http://img1.gtimg.com/news/pics/24270/24270157.jpg" width="285" height="209" border=0></a></div>
<div style="display:none"> <a href="http://news.qq.com/a/20091122/000574_15.htm" target=_blank><img onMouseOver="clearAutobb();" onMouseOut="setAutobb()" src="http://img1.gtimg.com/news/pics/24270/24270683.jpg" width="285" height="209" border=0></a></div>
</div></td>
</tr>
<tr>
<td><table cellSpacing="0" cellPadding="0" width="294" align="center" border="0">
<tr>
<td onMouseOver="clearAutobb();" onMouseOut="setAutobb()" align="center" width="222">
<div id="conbb">
<div style="display:block"><a class="bla" href="http://news.qq.com/a/20091122/000574_18.htm" target=_blank>一批救援人员准备下井搜救</a></div>
<div style="display:none"><a class="bla" href="http://news.qq.com/a/20091122/001253.htm" target=_blank>记者鹤岗矿难现场直击</a></div>
<div style="display:none"><a class="bla" href="http://news.qq.com/a/20091122/000574_15.htm" target=_blank>医护人员正在护理被救矿工</a></div>
</div></td>
<td width="72"><table id="numbb" cellSpacing="3" cellPadding="0" align="right" border="0">
<tr>
<td class="bigon" style="cursor:pointer"onclick="Meabb(0);" onMouseOver="clearAutobb();" onMouseOut="setAutobb()" align="center" width="15" height="18">1</td>
<td class="bigoff" style="cursor:pointer"onclick="Meabb(1);" onMouseOver="clearAutobb();" onMouseOut="setAutobb()" align="center" width="15">2</td>
<td class="bigoff" style="cursor:pointer"onclick="Meabb(2);" onMouseOver="clearAutobb();" onMouseOut="setAutobb()" align="center" width="15">3</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<script>
var nbb=0;
var showNumbb = document.getElementById("numbb");
function Meabb(value){
nbb=value;
setBgbb(value);
playsbb(value);
consbb(value);
}
function setBgbb(value){
for(var i=0;i<3;i++)
if(value==i){
showNumbb.getElementsByTagName("td")[i].className='bigon';
}
else{
showNumbb.getElementsByTagName("td")[i].className='bigoff';
}
}
function playsbb(value){
try
{
with (fcbb)//这个是图片部分的div的id
{
filters[0].Apply();
for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();
}
}
catch(e)
{
var divlist = document.getElementById("fcbb").getElementsByTagName("div");
for(i=0;i<3;i++)
{
i==value?divlist[i].style.display="block":divlist[i].style.display="none";
}
}
}
function consbb(value){
try
{
with (conbb)//conbb这个是图片标题description div的id
{
for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none";
}
}
catch(e)
{
var divlist = document.getElementById("conbb").getElementsByTagName("div");
for(i=0;i<3;i++)
{
i==value?divlist[i].style.display="block":divlist[i].style.display="none";
}
}
}
function clearAutobb(){clearInterval(autoStartbb)}
function setAutobb(){autoStartbb=setInterval("autobb()", 3000)}
function autobb(){
nbb++;
if(nbb>2)nbb=0;
Meabb(nbb);
}
setAutobb();
</script></td>
</tr>
</table>
</body>
</html>
