JS代码实现文字幻灯片

【实例名称】

文字幻灯片

【实例描述】

幻灯片在图像切换中应用非常广泛，有时为了增加页面的美观性，也需要为文字内容设置幻灯片。本例通过JavaScript和CSS的结合，学习制作文字幻灯片。

【实例代码】

<script language="JavaScript">
//用数组存放循环显示的信息
Text = new Array(
 "<a href='http://www.google.com' target='_blank' class='cr4'>我们的理工科学生必须要学习语文</a>",
 "<a href='http://www.google.com' class='cr4'>英语不过不能毕业，现在汉语不过也不能毕业</a>",
 "<a href='http://www.google.com' target='_blank' class='cr4'>要求所有理工科学生必须要学习语言、文学等方面的两门...</a>",
 "<a href='http://www.google.com' target='_blank' class='cr4'>文化素质教育核心课程”北京航空航天</a>",
 "<a href='http://www.google.com' 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代码下载