<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>動態flash效果</title>
<style type="text/css">
.ClassSubImg{FILTER: alpha(opacity=30);border:1pt solid #C1C3C0; cursor:hand;}
</style>
</head>
<body>
<table width="312" height="259" border="0" align="center">
<tr>
<td width="508" height="279" valign="top"><table width="310" height="265" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="429" height="215" align="center" valign="bottom" bgcolor="#FF0000"><a href="/" id="flash_link" target="_blank"><img src="1.jpg" name="mainImg" width="311" height="209" border="0" id="mainImg" style="filter:blendTrans(duration=1)"></a></td>
</tr>
<tr>
<td height="50" align="center">
<div style="width:312px; overflow:hidden; margin:0px" id="flash_overflow">
<table width="312" height="46" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="5/1.jpg" width="56" height="38" class="ClassSubImg" id="sub1" onClick="SetMainImg(this);"></td>
<td align="center"><img src="5/2.jpg" width="56" height="38" class="ClassSubImg" id="sub2" onClick="SetMainImg(this);"></td>
<td align="center"><img src="5/3.jpg" width="56" height="38" class="ClassSubImg" id="sub3" onClick="SetMainImg(this);"></td>
<td align="center"><img src="5/4.jpg" width="56" height="38" class="ClassSubImg" id="sub4" onClick="SetMainImg(this);"></td>
<td align="center"><img src="5/5.jpg" width="56" height="38" class="ClassSubImg" id="sub5" onClick="SetMainImg(this);"></td>
</tr>
</table>
</div>
</td>
</tr>
</table></td>
</tr>
</table>
<script>
var BeginFilter=30;//初始濾鏡值，要保持與ClassSubImg一致
var ChangeFilter=100;//清晰濾鏡值
var BeginStyle="1pt solid #C1C3C0";//小圖片初始風格，要保持與ClassSubImg一致
var ChangeStyle="1pt solid #F4972F";//小圖片輪換風格
var BorderWidth=1*2;//圖片的邊框寬度*2
var ImgWidth=113;//圖片的寬度
var CurrentImg=1;//當前顯示的圖片序數
var ClassAry=new Array("1","2","3","4","5");//圖片鏈接地址
var Cnt=ClassAry.length;//圖片總數
flash_link.href=ClassAry[CurrentImg-1];//初始化爲第一張圖片的地址
function SetMainImg(obj)
{
mainImg.filters.blendTrans.apply();
mainImg.src=obj.src;
mainImg.filters.blendTrans.play();
for(i=1;i<=Cnt;i++)
{
if(obj==document.getElementById("sub"+(i).toString()))
{
CurrentImg=i;
flash_link.href=ClassAry[(CurrentImg-1)%Cnt];//a.innerHTML=CurrentImg;
CurrentImg=CurrentImg%(Cnt+1);
}
document.getElementById("sub"+(i).toString()).style.border=BeginStyle;
document.getElementById("sub"+(i).toString()).filters.alpha.opacity=BeginFilter;
}
obj.style.border=ChangeStyle;
obj.filters.alpha.opacity=ChangeFilter;
}
function SetMainImgAll()
{
flash_link.href=ClassAry[(CurrentImg-1)%Cnt];
CurrentImg=CurrentImg%(Cnt+1);
if(CurrentImg==0)CurrentImg=1;//a.innerHTML=CurrentImg;
obj=document.getElementById("sub"+(CurrentImg).toString());
mainImg.filters.blendTrans.apply();
mainImg.src=obj.src;
mainImg.filters.blendTrans.play();
for(i=0;i<Cnt;i++)
{
document.getElementById("sub"+(i+1).toString()).style.border=BeginStyle;
document.getElementById("sub"+(i+1).toString()).filters.alpha.opacity=BeginFilter;
}
obj.style.border=ChangeStyle;
obj.filters.alpha.opacity=ChangeFilter;
CurrentImg+=1;
if((BorderWidth+ImgWidth)*CurrentImg>flash_overflow.offsetWidth)//當輪詢到不能顯示的圖片時，移動div以顯示其他圖片
flash_overflow.scrollLeft+=(BorderWidth+ImgWidth);
else
flash_overflow.scrollLeft=0;
}
setInterval("SetMainImgAll()",3000);
</script>
<span id="a"></span>
</body>
</html>