JS代碼實(shí)現(xiàn)文字幻燈片

【實(shí)例名稱(chēng)】

文字幻燈片

【實(shí)例描述】

幻燈片在圖像切換中應(yīng)用非常廣泛，有時(shí)為了增加頁(yè)面的美觀性，也需要為文字內(nèi)容設(shè)置幻燈片。本例通過(guò)JavaScript和CSS的結(jié)合，學(xué)習(xí)制作文字幻燈片。

【實(shí)例代碼】

<script language="JavaScript">
//用數(shù)組存放循環(huán)顯示的信息
Text = new Array(
 "<a  target='_blank' class='cr4'>我們的理工科學(xué)生必須要學(xué)習(xí)語(yǔ)文</a>",
 "<a  class='cr4'>英語(yǔ)不過(guò)不能畢業(yè)，現(xiàn)在漢語(yǔ)不過(guò)也不能畢業(yè)</a>",
 "<a  target='_blank' class='cr4'>要求所有理工科學(xué)生必須要學(xué)習(xí)語(yǔ)言、文學(xué)等方面的兩門(mén)...</a>",
 "<a  target='_blank' class='cr4'>文化素質(zhì)教育核心課程”北京航空航天</a>",
 "<a  target='_blank' class='cr4'>有必要。中國(guó)人國(guó)語(yǔ)不行還談什么</a>"
)
var IDX= -1;
//用來(lái)循環(huán)顯示內(nèi)容的方法
function playAd() 
{
 if (IDX==Text.length-1) {
  IDX=0;
 } else {
  IDX++;
 }
 var prefix = "";
 divText.filters[0].apply();            //應(yīng)用濾鏡效果
 divText.innerHTML = prefix + Text[IDX];//注意divText是表格中單元格的ID
 divText.filters[0].play();
 to = setTimeout("playAd()",6000);      //定時(shí)器用來(lái)循環(huán)顯示
}
</script>
需要在body中添加一個(gè)table，用來(lái)定義內(nèi)容顯示的區(qū)域，代碼如下所示：
<table width=453 border=0 cellspacing=3 cellpadding=0>
          <tr bgcolor=CCF4B9> 
            <td height=30 bgcolor=CCF4B9 id=divText class=trans></td>
          </tr>
   <script>playAd()</script>
 </table>
</body>
</html>

【運(yùn)行效果】

【難點(diǎn)剖析】

本例的重點(diǎn)是對(duì)象濾鏡的使用。Javascript為對(duì)象提供了“filters”屬性．專(zhuān)門(mén)用于設(shè)置濾鏡效果。其總共有三種方法，語(yǔ)法和注釋如下所示：

對(duì)象名.filters(濾鏡數(shù)值).Apply( )           //裝備濾鏡

對(duì)象名.filters(濾鏡數(shù)值).play( )            //開(kāi)始播放濾鏡效果

對(duì)象名.filters(濾鏡數(shù)值).Stop( )          //停止濾鏡效果

【源碼下載】

本實(shí)例JS代碼下載