JS代碼實現文字幻燈片

【實例名稱】

文字幻燈片

【實例描述】

幻燈片在圖像切換中應用非常廣泛，有時為了增加頁面的美觀性，也需要為文字內容設置幻燈片。本例通過JavaScript和CSS的結合，學習制作文字幻燈片。

【實例代碼】

<script language="JavaScript">
//用數組存放循環顯示的信息
Text = new Array(
 "<a  target='_blank' class='cr4'>我們的理工科學生必須要學習語文</a>",
 "<a  class='cr4'>英語不過不能畢業，現在漢語不過也不能畢業</a>",
 "<a  target='_blank' class='cr4'>要求所有理工科學生必須要學習語言、文學等方面的兩門...</a>",
 "<a  target='_blank' class='cr4'>文化素質教育核心課程”北京航空航天</a>",
 "<a  target='_blank' class='cr4'>有必要。中國人國語不行還談什么</a>"
)
var IDX= -1;
//用來循環顯示內容的方法
function playAd() 
{
 if (IDX==Text.length-1) {
  IDX=0;
 } else {
  IDX++;
 }
 var prefix = "";
 divText.filters[0].apply();            //應用濾鏡效果
 divText.innerHTML = prefix + Text[IDX];//注意divText是表格中單元格的ID
 divText.filters[0].play();
 to = setTimeout("playAd()",6000);      //定時器用來循環顯示
}
</script>
需要在body中添加一個table，用來定義內容顯示的區域，代碼如下所示：
<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>

【運行效果】

【難點剖析】

本例的重點是對象濾鏡的使用。Javascript為對象提供了“filters”屬性．專門用于設置濾鏡效果。其總共有三種方法，語法和注釋如下所示：

對象名.filters(濾鏡數值).Apply( )           //裝備濾鏡

對象名.filters(濾鏡數值).play( )            //開始播放濾鏡效果

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

【源碼下載】

本實例JS代碼下載