求教span挨个循环显示

vivianhqy 2008-09-08 08:32:00
各位大侠，请问我要实现以下ul li a 中的span挨个显示该如何写代码？我自己写的那个不起作用。说明：在css中那些span的属性已设定display：none；请赐教
<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.getElementsByName("spantips");

    for(j=0;j<oDiv.length;j++)

    {

           oDiv[j].style.display=(oDiv[j].style.display=="none")?"block":"none";

    }    

</script>
...全文
289 22 打赏 收藏 转发到动态 举报
写回复
用AI写文章
22 条回复
切换为时间正序
请发表友善的回复…
发表回复
vivianhqy 2008-09-12
  • 打赏
  • 举报
 回复
谢谢各位前辈的帮助了。chinmo前辈说的效率问题对于我的小站来说，暂时还不造成影响的。但您的精神值得我学习，谢谢！
一把编程的菜刀 2008-09-09
  • 打赏
  • 举报
 回复 
<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才是对的
sd5816690 2008-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 vivianhqy 的回复:]
谢谢楼上的代码。可是这个欠缺兼容性，ie行，firefox、opera都不行呢...
[/Quote]

又是可恶的兼容问题
下面的代码在 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>
vivianhqy 2008-09-09
  • 打赏
  • 举报
 回复
谢谢楼上的代码。可是这个欠缺兼容性，ie行，firefox、opera都不行呢...
一把编程的菜刀 2008-09-09
  • 打赏
  • 举报
 回复
我那也失去效率的优势了

再想想
一把编程的菜刀 2008-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 18 楼 jhwcd 的回复:]
引用 17 楼 cgisir 的回复:
简化了一下

HTML code <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>…
[/Quote]

可是失去了效率，以效率做代价这做法
一把编程的菜刀 2008-09-09
  • 打赏
  • 举报
 回复 


<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>
jhwcd 2008-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 cgisir 的回复:]
简化了一下

HTML code<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="templa…
[/Quote]
17楼的方法不错。
cgisir 2008-09-09
  • 打赏
  • 举报
 回复
简化了一下
<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>
浴火_凤凰 2008-09-09
  • 打赏
  • 举报
 回复
学习楼上的了
vivianhqy 2008-09-09
  • 打赏
  • 举报
 回复
哇，chinmo原来是4星的高手哦！！^_^
vivianhqy 2008-09-09
  • 打赏
  • 举报
 回复
感谢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了，哈哈，你们真厉害！！拜托啦！
一把编程的菜刀 2008-09-09
  • 打赏
  • 举报
 回复
之前那个只是粗略写的，稍微改改就可以的啦

elseif(i <7){i++;}
setTimeout(showdiv(),1000);

if(i>1){document.getElementById("tip"+i-1).style.display ="none";}

就是这几个地方错误稍微改下就OK了嘛！！

也就是改成12楼！
sd5816690 2008-09-08
  • 打赏
  • 举报
 回复
速度可以调整，现在是 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>
vivianhqy 2008-09-08
  • 打赏
  • 举报
 回复
是的，使用2楼大侠的代码未能实现我要的效果，这主要是我没有说清楚，真不好意思。
感谢5楼大侠的帮忙，可是运行出错啊，恳请再帮帮忙，谢谢啦！
vivianhqy 2008-09-08
  • 打赏
  • 举报
 回复
哎呀，不好意思，回错了+_+！(粘贴错了)
是的，使用2楼大侠的代码的确未能实现我想要的效果，这主要是我没有说清楚，真不好意思！
谢谢5楼大侠的帮忙，可是运行出错啊，恳请再帮帮忙，谢谢！
vivianhqy 2008-09-08
  • 打赏
  • 举报
 回复
http://topic.csdn.net/u/20080908/20/f8af8b71-a191-43cd-a9e9-b6e36b7291e9.html
一把编程的菜刀 2008-09-08
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 vivianhqy 的回复:]
感谢各位大侠的热心帮忙，2楼的理解是对的，可能我说的不太清楚。的确我要的效果是一个span显示一段时间（比如说3秒）然后隐藏，下一个接着显示。。。依此类推，到第七个结束后有重新轮到第一个，循环不息的。楼上几位大侠赐教的我还没有尝试，先谢谢，这就去测试
[/Quote]
呵呵，这个直接用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>
vivianhqy 2008-09-08
  • 打赏
  • 举报
 回复
感谢各位大侠的热心帮忙，2楼的理解是对的，可能我说的不太清楚。的确我要的效果是一个span显示一段时间（比如说3秒）然后隐藏，下一个接着显示。。。依此类推，到第七个结束后有重新轮到第一个，循环不息的。楼上几位大侠赐教的我还没有尝试，先谢谢，这就去测试
zhangw428 2008-09-08
  • 打赏
  • 举报
 回复
哦，原来说的是这个问题，学习楼上的了
加载更多回复（2）
【求教】ImageSpan显示异常
首先我把EditText中的内容发送到服务器中保存，在EditText中ImageSpan显示正常： <!-- lang: java --> Uri img_uri = Uri.parse("android.resource://mypackage/" + R.drawable.e...
新人求教，for循环输出
新人求教，for循环输出 要求输出 A BBB CCCCC DDDDDDD 我打了一段，但是还没完善，不知道怎么处理 // AAABBB.cpp : 定义控制台应用程序的入口点。 #include “stdafx.h” #include “windows.h” #include “iostream” using namespace std; int _tmain(int argc, _TCHAR*...
oracle中循环赋值,求教Oracle循环赋值的有关问题
求教Oracle循环赋值的问题问题：现在有表table1(a,b,c)，a列为序号，b列是给定的值，C列第1行是50，后续为空。现在要为C列赋值，C的值=前一行的c*3/5+本行的b*2/5。例子表中有数据abc11050220315417a=2行c=50*3/5+20*2/5=38a=3行c=38*...
android 结束for循环,求教在循环中如何继续循环和达到条件后跳出循环的问题
在做一个游戏任务脚本，有个问题想问一下大神。。。找图命令查找图1，找到后查找图2，找到后进入一个倒计时，如果倒计时走完了还未进入游戏(进入游戏会有一个加载画面)，就从新回到查找图1循环下来，如果在倒计时走完之前开始游戏了，怎么退出这整个循环，开始另外的找图命令？ 或者这样说，如何把T=0和扫描"载入时的特征标志"图片两者同时并存，当T=0就循环，当找到图片就跳出整个循环Rem 快速进房Delay...
matlab循环一次多长时间,新人求教简化for循环的办法，循环太大耗时太长
%**********************************一单元测试**********************************syms c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c4_ c5_ c6_ real;syms alpha1 alpha2 alpha3 alpha4 alpha5 alpha6 real;syms L T0 rh r0 E...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章