求教span挨个循环显示

<div id="boxmap">
    <ul>
        <li id="map1"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map1.gif"/><span id="tip1" name="spantips">测试内容哈哈哈哈</span></a></li>
        <li id="map2"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map2.gif"/><span id="tip2" name="spantips"></span></a></li>
        <li id="map3"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map3.gif"/><span id="tip3" name="spantips"></span></a></li>
        <li id="map4"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map4.gif"/><span id="tip4" name="spantips"></span></a></li>
        <li id="map5"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map5.gif"/><span id="tip5" name="spantips"></span></a></li>
        <li id="map6"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map6.gif"/><span id="tip6" name="spantips"></span></a></li>
        <li id="map7"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map7.gif"/><span id="tip7" name="spantips"></span></a></li>
    </ul>
</div>
<script>
    var  oDiv = document.getElementById("boxmap").document.getElementsByTagName("span");
    for(j=0;j<oDiv.length;j++)
    {
           oDiv[j].style.display=(oDiv[j].style.display=="none")?"block":"none";
    }
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

两个原因:
一是<span>不能通过getElementsByName()取得对象集合.
二是我理解你这里说的挨个显示是指一个接一个的显示，不是一次全部显示，这里就得有个时间差，因为脚本执行太快，看不到一个接一个显示的效果，所以用setTimeout()来做这个效果．测试通过：
<style type="text/css">
#boxmap span {
display:none;
}
</style>
<div id="boxmap">
    <ul>
        <li id="map1"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map1.gif"/><span id="tip1" name="spantips">测试内容哈哈哈哈</span></a></li>
        <li id="map2"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map2.gif"/><span id="tip2" name="spantips">1</span></a></li>
        <li id="map3"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map3.gif"/><span id="tip3" name="spantips">2</span></a></li>
        <li id="map4"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map4.gif"/><span id="tip4" name="spantips">3</span></a></li>
        <li id="map5"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map5.gif"/><span id="tip5" name="spantips">4</span></a></li>
        <li id="map6"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map6.gif"/><span id="tip6" name="spantips">5</span></a></li>
        <li id="map7"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map7.gif"/><span id="tip7" name="spantips">6</span></a></li>
    </ul>
</div>
<script language="javascript">
var oDiv = document.getElementById("boxmap").document.getElementsByTagName("span");
for(var j=0;j<oDiv.length;j++)
{
   setTimeout("oDiv["+j+"].style.display = (oDiv["+j+"].style.display == \"block\") ? \"none\" : \"block\";",1000 * j);
}
</script>
感谢各位大侠的热心帮忙，2楼的理解是对的，可能我说的不太清楚。的确我要的效果是一个span显示一段时间（比如说3秒）然后隐藏，下一个接着显示依此类推，到第七个结束后有重新轮到第一个，循环不息的。楼上几位大侠赐教的我还没有尝试，先谢谢，这就去测试
呵呵，这个直接用2楼的不行，必须进行修改当然也是用setTimeout()
这个就不需要用循环了
我写JS就可以了
<script>
    var  i =1;
    var obj;
  function showdiv(){
  obj=document.getElementById("tip"+i)
  obj.style.display ="block";
  if(i>1){document.getElementById("tip"+i-1).style.display ="none";}
  if(i==1){document.getElementById("tip7").style.display ="none";}
  if(i==7){i=1;}
  elseif(i<7){i++;}
  setTimeout(showdiv(),1000);
}
</script>
http://topic.csdn.net/u/20080908/20/f8af8b71-a191-43cd-a9e9-b6e36b7291e9.html
速度可以调整，现在是 100 毫秒<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#boxmap span{
display:none;
}
</style><script>
var speed = 100; // 速度，单位毫秒
var oDiv = null;
var currentNumber = 1;
var amount = 0;function init(){
oDiv = document.getElementsByTagName("span");
for(var i = 0;(e = oDiv[i]); i++){
if(e.name == "spantips"){
amount++;
}
}
};function shiftSpan(){
document.getElementById("tip" + currentNumber).style.display = "none";
currentNumber++;
currentNumber = currentNumber > amount ? 1 : currentNumber;
document.getElementById("tip" + currentNumber).style.display = "block";
setTimeout("shiftSpan()",speed);
}</script>
</head>
<body onload="init();shiftSpan();">
<div id="boxmap">
    <ul>
        <li id="map1"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map1.gif"/><span id="tip1" name="spantips">1111111</span></a></li>
        <li id="map2"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map2.gif"/><span id="tip2" name="spantips">2222222222</span></a></li>
        <li id="map3"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map3.gif"/><span id="tip3" name="spantips">333333333</span></a></li>
        <li id="map4"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map4.gif"/><span id="tip4" name="spantips">444444444</span></a></li>
        <li id="map5"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map5.gif"/><span id="tip5" name="spantips">55555555</span></a></li>
        <li id="map6"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map6.gif"/><span id="tip6" name="spantips">666666666</span></a></li>
        <li id="map7"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map7.gif"/><span id="tip7" name="spantips">777777777</span></a></li>
    </ul>
</div>
</body>
</html>
谢谢楼上的代码。可是这个欠缺兼容性，ie行，firefox、opera都不行呢...
又是可恶的兼容问题
下面的代码在 IE6 和 FF 上试过
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#boxmap span{
display:none;
}
</style><script>
var speed = 200; // 速度，单位毫秒
var oDiv = null;
var currentNumber = 1;
var amount = 0;function init(){
oDiv = document.getElementsByName("spantips");
amount = oDiv.length;
if(amount == 0){
oDiv = document.getElementsByTagName("span");
     for(var i = 0;(e = oDiv[i]); i++){
         if(e.name == "spantips"){
             amount++;
         }
     }
}
};function shiftSpan(){
document.getElementById("tip" + currentNumber).style.display = "none";
currentNumber++;
currentNumber = currentNumber > amount ? 1 : currentNumber;
document.getElementById("tip" + currentNumber).style.display = "block";
setTimeout("shiftSpan()",speed);
}</script>
</head>
<body onload="init();shiftSpan();">
<div id="boxmap">
    <ul>
        <li id="map1"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map1.gif"/><span id="tip1" name="spantips">1111111</span></a></li>
        <li id="map2"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map2.gif"/><span id="tip2" name="spantips">2222222222</span></a></li>
        <li id="map3"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map3.gif"/><span id="tip3" name="spantips">333333333</span></a></li>
        <li id="map4"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map4.gif"/><span id="tip4" name="spantips">444444444</span></a></li>
        <li id="map5"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map5.gif"/><span id="tip5" name="spantips">55555555</span></a></li>
        <li id="map6"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map6.gif"/><span id="tip6" name="spantips">666666666</span></a></li>
        <li id="map7"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map7.gif"/><span id="tip7" name="spantips">777777777</span></a></li>
    </ul>
</div>
</body>
</html>
<script>
    var  i =1;
var z = 7;
  function showdiv(){
   var oobj="tip"+i;
  var obj=document.getElementById(oobj)
  obj.style.display ="block";
  if(i>1){var j=i-1
  var ooobj="tip"+j;
  document.getElementById(ooobj).style.display ="none";}
  if(i==1){document.getElementById("tip7").style.display ="none";}
  i++;
  i= i > z ? 1 : i;
  setTimeout("showdiv()",1000);
}
window.onload=function(){showdiv()}
</script>
呵呵，这个JS才是对的
之前那个只是粗略写的，稍微改改就可以的啦elseif(i <7){i++;}
  setTimeout(showdiv(),1000); if(i>1){document.getElementById("tip"+i-1).style.display ="none";} 就是这几个地方错误稍微改下就OK了嘛！！也就是改成12楼！
感谢chinmo和sd5816690两位，经测试，你们的代码都是有效的。感觉上chinmo的更简洁，效率更高些。
还有一个小问题：如何让鼠标移动到其中一个<a><img></a>(见原来的html代码，如：
<li id="map3"><a href="#" class="imgtips"><img src="template/$_SC[template]/image/map3.gif"/><span id="tip3" name="spantips">333333333</span></a></li>
)暂停循环显示，当鼠标移开时继续刚才的循环呢？其实这已经是一个slideshow了，哈哈，你们真厉害！！拜托啦！
哇，chinmo原来是4星的高手哦！！^_^
简化了一下
<style>
#boxmap{margin:0; padding:0; width:200px;}
#boxmap li{background:#ccc; margin:5px 0;}
#boxmap li span{display:none}
#boxmap li.vis span{display:block}
</style>
<div id="boxmap">
    <ul>
        <li><a href="#"><img src="template/$_SC[template]/image/map1.gif"/><span>测试内容哈哈哈哈</span></a></li>
        <li><a href="#"><img src="template/$_SC[template]/image/map2.gif"/><span>测试内容哈哈哈哈</span></a></li>
        <li><a href="#"><img src="template/$_SC[template]/image/map3.gif"/><span>测试内容哈哈哈哈</span></a></li>
        <li><a href="#"><img src="template/$_SC[template]/image/map4.gif"/><span>测试内容哈哈哈哈</span></a></li>
        <li><a href="#"><img src="template/$_SC[template]/image/map5.gif"/><span>测试内容哈哈哈哈</span></a></li>
        <li><a href="#"><img src="template/$_SC[template]/image/map6.gif"/><span>测试内容哈哈哈哈</span></a></li>
        <li><a href="#"><img src="template/$_SC[template]/image/map7.gif"/><span>测试内容哈哈哈哈</span></a></li>
    </ul>
</div>
<script>
function swap_span(){
var lis = document.getElementById('boxmap').getElementsByTagName('li'), li_cur = lis[0], i = 1, s = false;

//停止效果
for(var n=0; n<lis.length; n++){
lis[n].onmouseover = function(){s = true}
lis[n].onmouseout = function () {s = false}
}

//显示效果
li_cur.className='vis';
var t = setInterval(function(){
if(s)return;
li_cur.className = '';
lis[i].className = 'vis';
li_cur = lis[i];
i == lis.length-1 ? i=0 : i++;
}, 1000);
}
window.onload= swap_span;
</script>
<script>
    var  i =1;
    var z = 7;

  function showdiv(){
  var img = document.getElementById('boxmap').getElementsByTagName('img');
    //停止效果
    for(var n=0; n<img.length; n++){
        img[n].onmouseover = function(){clearTimeout(t);return false}
        img[n].onmouseout = function () {showdiv();return true}
    }   var oobj="tip"+i;
  var obj=document.getElementById(oobj)
  obj.style.display ="block";
  if(i>1){var j=i-1
  var ooobj="tip"+j;
  document.getElementById(ooobj).style.display ="none";}
  if(i==1){document.getElementById("tip7").style.display ="none";}
  i++;
  i= i > z ? 1 : i;
  var t=setTimeout("showdiv()",1000);
}
window.onload=function(){showdiv()}
</script>
谢谢各位前辈的帮助了。chinmo前辈说的效率问题对于我的小站来说，暂时还不造成影响的。但您的精神值得我学习，谢谢！