项目中需要用到文本交替显示;
网上找了一下,有例子,但是有缺陷,这里记录一下
原文地址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()去写这个函数,出现的问题同一个一养,都会报错