在一個網頁中的一個table裏添加幾張圖片,用js實現圖片切換的效果。
做法如下:
再HTML中設置一個table
<table width="535" height="215" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="450" height="215">
<script language=JavaScript> //js代碼
var bannerAD=new Array(); //用於存放圖片路徑(相對路徑)
var adNum=0;
bannerAD[0]="F200810030934232939618479.jpg";
bannerAD[1]="F200810030934241521376481.jpg";
bannerAD[2]="F200810030934242127760111.jpg";
bannerAD[3]="F200810030934242416320906.jpg";
bannerAD[4]="F200810030934242490616851.jpg";
bannerAD[5]="F200810030934251813330055.jpg";
function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);//設置圖片切換
bannerADrotator.filters.revealTrans.apply(); //應用圖片切換
}
}
function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play() //播放圖片
}
function nextAd(){
if(adNum<bannerAD.length-1)adNum++;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 5000); //5秒鐘切換一張圖片
}
</script>
<img style="FILTER: revealTrans(duration=2,transition=20)" height=292 src="" width=515 border=1 name=bannerADrotator>
<SCRIPT language=JavaScript>nextAd()</SCRIPT>
</td>
</tr>
</table>