软件学堂

网游分类软件分类

JS代码实现文字幻灯片

2012-10-22 来源:网络

【实例名称】

文字幻灯片

【实例描述】

幻灯片在图像切换中应用非常广泛,有时为了增加页面的美观性,也需要为文字内容设置幻灯片。本例通过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代码下载

上一篇:JS代码实现文字的垂直滚动
下一篇:随机动态文字效果JS代码怎么写

相关文章