javascript交替显示文本

最新推荐文章于 2022-12-14 11:02:49 发布

guang730

最新推荐文章于 2022-12-14 11:02:49 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/guang730/article/details/25110055

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

项目中需要用到文本交替显示；

网上找了一下，有例子，但是有缺陷，这里记录一下

原文地址http://www.mb5u.com/jscode/45725/

先贴出代码

#newslist{
  background:#f8f8f8;border:1px solid silver;padding:1px;height:20px;line-height:20px;width:80px;
 }
 #contain{
  font-size:12px;overflow:hidden;list-style:none;width:80px;height:20px;margin:0px;padding:0;
 }
 #contain li{
  height:20px;line-height:20px;white-space:nowrap;overflow:hidden;padding-left:5px;
 }

html和javascript代码

<div id="newslist">
  <ul id="contain">
<li><a href="/sort/list_2_34_1.shtml">聊天留言</a></li><li><a href="/sort/list_2_35_1.shtml">企业建站</a></li><li><a href="/sort/list_2_36_1.shtml">论坛社区</a></li><li><a href="/sort/list_2_37_1.shtml">新闻文章</a></li><li><a href="/sort/list_2_52_1.shtml">CMS系统</a></li><li><a href="/sort/list_2_53_1.shtml">博客日记</a></li><li><a href="/sort/list_2_51_1.shtml">影音视频</a></li>
  </ul>
 </div>
<SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",3000);
</SCRIPT>

这里面说几个注意点

1.使用jquery库的时候（不管使不使用），要把代码放在ready里面，否则document没有加载完成就调用getElementById回报container为null的错误

2.函数在调用时才能执行，不要是视图使用$(xx).fn.extend()去写这个函数，出现的问题同一个一养，都会报错