JS+CSS 定时文字切换效果 同一页面 放N个

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>JS+CSS制作的定时文字切换效果 - www.webdm.cn</TITLE>
<style type="text/css"> #contain{
font-size:12px;overflow:hidden;list-style:none;width:288px;height:30px;margin:0px;padding:0;
 }
.333{
height:30px;
line-height:22px;
white-space:nowrap;
overflow:hidden;
background-color: #0C6;
 }
</style>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</HEAD> <BODY>  <div id="contain">
   <div class="333">百度，世界最大的中文搜索引擎</div>
   <div class="333"><a href="http://www.csdn.net">CSDN，中国最聚人气的IT技术社区</a></div>
   <div class="333"><a href="http://www.webdm.cn">网页代码站，最有质量的代码下载站</a></div>
   <div class="333"><a href="http://www.sina.com">新浪，中国第一门户网站</a></div>
  </div><SCRIPT LANGUAGE="JavaScript">
function xx(){
var container=document.getElementById("contain");
container.appendChild(container.firstChild);
}
setInterval("xx()",300);
</SCRIPT>
 </BODY>
</HTML>这个要在同一页面 放N个 如:<div id="contain2">  <div id="contain3"> JS里怎么修改，  不是手动改JS添加ID 如:getElementById("contain","contain2","contain3");
是只需要改<div id="contain2,3,4,5,6,7,8,9">就可以

解决方案 »

  1.   

    给这些div加上一个类名：
      <div id="contain" class="xx">
       <div class="333">百度，世界最大的中文搜索引擎</div>
       <div class="333"><a href="http://www.csdn.net">CSDN，中国最聚人气的IT技术社区</a></div>
       <div class="333"><a href="http://www.webdm.cn">网页代码站，最有质量的代码下载站</a></div>
       <div class="333"><a href="http://www.sina.com">新浪，中国第一门户网站</a></div>
      </div>
      <div id="contain2" style="margin-top:100px;" class="xx">
       <div class="333">百度，世界最大的中文搜索引擎</div>
       <div class="333"><a href="http://www.csdn.net">CSDN，中国最聚人气的IT技术社区</a></div>
       <div class="333"><a href="http://www.webdm.cn">网页代码站，最有质量的代码下载站</a></div>
       <div class="333"><a href="http://www.sina.com">新浪，中国第一门户网站</a></div>
      </div><script type="text/javascript">
    function xx() {
    var container = document.getElementsByTagName('div');
    for(var i = 0; i < container.length; i ++) {
    if (container[i].className == 'xx') container[i].appendChild(container[i].firstChild);
    }
    }
    setInterval("xx()",300);
    </script>
      

  2.   

    如果考虑执行性能的话，建议你这么做：
      <div id="contain">
       <div class="333">百度，世界最大的中文搜索引擎</div>
       <div class="333"><a href="http://www.csdn.net">CSDN，中国最聚人气的IT技术社区</a></div>
       <div class="333"><a href="http://www.webdm.cn">网页代码站，最有质量的代码下载站</a></div>
       <div class="333"><a href="http://www.sina.com">新浪，中国第一门户网站</a></div>
      </div>
      <div id="contain2" style="margin-top:100px;">
       <div class="333">百度，世界最大的中文搜索引擎</div>
       <div class="333"><a href="http://www.csdn.net">CSDN，中国最聚人气的IT技术社区</a></div>
       <div class="333"><a href="http://www.webdm.cn">网页代码站，最有质量的代码下载站</a></div>
       <div class="333"><a href="http://www.sina.com">新浪，中国第一门户网站</a></div>
      </div><script type="text/javascript">
    var arContainer = ['contain','contain2']; //把所有需要进行处理的div的id属性值保存到一个全局数组变量中
    function xx() {
    for (var i = 0;i < arContainer.length; i ++) {
    var container = document.getElementById(arContainer[i]);
    container.appendChild(container.firstChild);
    }
    }
    setInterval("xx()",300);
    </script>
      

  3.   

    楼主是要文字自动滚动？　演示地址:http://www.popub.net/script/MSClass.html
    　下载地址:http://www.popub.net/script/MSClass.js