麻烦在家帮我把下面这些代码写成一个循环

解决方案 »

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

        document.getElementById("dd").style.paddingBottom="10";
这一句大家，先不用管它
--! 这个是做tab类似的效果吧，这种方式效率很低啊，最好先记住上一次的点击的tab。
恩，是啊，所以我才想用另一种方法写麻，你们帮我定一个麻
AA BB CC DD 里面我想各放一个图片然后，不停的切换，要怎么样啊，麻烦你们帮我改哈行不
function open(event){
        document.getElementById("aa").style.display=event!="aa"?"none":"block";
        document.getElementById("bb").style.display=event!="bb"?"none":"block"";
        document.getElementById("cc").style.display=event!="cc"?"none":"block";
        document.getElementById("dd").style.display=event!="dd"?"none":"block";
}
<img id="aa" src="" onfocus='open("aa")'></img>
<img id="bb" src="" onfocus='open("bb")'></img>
<img id="cc" src="" onfocus='open("cc")'></img>
<img id="dd" src="" onfocus='open("dd")'></img>
            function test(obj)
            {
var i;
var mycars = new Array();
mycars[0] = "aa";
mycars[1] = "bb";
mycars[2] = "cc";
mycars[3] = "dd";

for (i=0;i<mycars.length;i++)
{
             if(mycars[i] == obj)
             {
             document.getElementById(obj).style.display="block";

             }else
             {
             document.getElementById(obj).style.display="none";
             }
}
            }
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
   <script type="text/javascript">
function displayimg(v)
{
   for(i=1;i<=4;i++)
   {
     if(i==v)
     {
       document.getElementById("img"+v).style.display="block";
     }
     else
     {
       document.getElementById("img"+i).style.display="none";
     }
   }
}
   </script>
</head>
<body>    <form id="form1" runat="server">
    <div>
    <div><img  src="images/1.gif"  onclick="displayimg(1)"/>
    <img  src="images/2.gif"  onclick="displayimg(2)"/>
    <img  src="images/3.gif"  onclick="displayimg(3)"/>
    <img  src="images/4.gif"  onclick="displayimg(4)"/></div>

<img  id="img1" src="images/1.gif" style="display:none" />
<img  id="img2" src="images/2.gif"  style="display:none" />
<img  id="img3" src="images/3.gif"  style="display:none" />
<img  id="img4" src="images/4.gif"  style="display:none" />

    </div>
    </form>
</body>
</html>开始，所有图片不显示，当点击第一张时，第一张图片在底下显示，点击第二张时，第二张在底下显示，第一张隐藏，以此类推，点那张，那张显示，别的隐藏，，是要这种效果吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片效果</title>
</head><body><style>
.a1{ FILTER: alpha(opacity=100); width:100%; height:100%}
.a2{ FILTER: alpha(opacity=90); width:80%; height:80%}
.a3{ FILTER: alpha(opacity=80); width:70%; height:70%}
.a4{ FILTER: alpha(opacity=70); width:60%; height:60%}
.a5{ FILTER: alpha(opacity=60); width:50%; height:50%}
.a6{ FILTER: alpha(opacity=50); width:40%; height:40%}
.a7{ FILTER: alpha(opacity=40); width:30%; height:30%}
.a8{ FILTER: alpha(opacity=30); width:20%; height:20%}
.a9{FILTER: alpha(opacity=20); width:10%; height:10%}
.a10{ FILTER: alpha(opacity=0); width:0; height:0}</style>
<body>
<div id="fu">
<div  style="POSITION: relative; width:100px; height:100px" id="banner" >
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style=" POSITION: absolute;  DISPLAY: none "   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
</div></div>
<a href="#" onclick="(fu.style.display=='none')?fu.style.display='block':fu.style.display='none';" >隐藏或显示</a>
</body><script>
var banner=document.getElementById("banner");//获得父容器
var img=banner.getElementsByTagName("IMG");//得到容器下的IMG
var i=0;//标记当前展示的IMG
displayFlag=true;//标记最外层容器是否被隐藏
function checkDisplay(obj){//循环banner的父元素，有任意一层隐藏则退出方法
while(obj.parentNode.tagName!="BODY"){
obj=obj.parentNode;
if(obj.style!=null)
if(obj.offsetWidth==0||obj.style.display=="none"||obj.style.visibility=="hidden"){
var imagesss=document.getElementById("banner").getElementsByTagName("IMG");

for(var fr=0;fr<imagesss.length;fr++){
imagesss[fr].style.visibility="hidden";
}
return displayFlag=false;
}
else
return displayFlag=true;
}
}
function change(){
img=banner.getElementsByTagName("IMG");//得到容器下的IMG
c=1;//定义className
var t=null;//定义计时器
t=setInterval(function(){
checkDisplay(banner);//运行前先判断一次是否被隐藏
if(c==10||!displayFlag)//一次循环结束，或者被隐藏了，则清空计时器
{
return clearInterval(t);//同时退出方法
}
if(c!=9)//目前只10个样式，循环到9则结束
{
img[i].className="a"+c;//定义新的CLASSNAME
img[i].style.display='inline';//把图片定义为显示状态
img[i].style.visibility='visible';
img[i].style.left=banner.offsetWidth - img[i].offsetWidth;//将图片居右
}
else{
img[i].style.left=0;//此时要隐藏图片，先将图片居左
img[i].className="a1";//再还原CLASSNAME
img[i].style.display="none";//最后隐藏
img[i].style.visibility='hidden';
}
if(i==img.length-1){//当图片循环到最后一张时的处理
img[0].style.left=0;
img[0].style.display="inline";//控制第1个图片显示
img[0].style.visibility='visible';
img[0].className="a"+(10-c);//定义第1个图片的CLASSNAME
}
else{
//否则改变i的下一张图片
img[i+1].style.left=0;
img[i+1].style.display="inline";
img[i+1].style.visibility='visible';
img[i+1].className="a"+(10-c);
}c++;//样式标记},100);//0。1秒变动一次
i++;
if(i>=img.length){//循环到最后一张则将i归0
i=0;
}
}
change();
setInterval(change,2000);//计时器</script>

</body>
</html>恩。。很久以前写的图片效果。。
还骗过分呢
总之LZ要图片效果的话  就拿去用吧
var open = function(arg){
var str="aa bb cc dd".split(" ");
for(var i=0;i<4;i++){
document.getElementById(str[i]).style.display=arg==str[i] ? "block" : "none";
}
};
传入一个参数呀...之后根据参数设定嘛...很简单的。
你的id定规则一点那样就好循环了
function open(temp){
for(var i=0; i<4; i++){
if(temp == i){
continue;
}
document.getElementById(i).style.display="none";
}
document.getElementById(temp).style.display="block";
}
<li><a onclick="JavaScript:test(aa);" >AAAA</A></li>
<li><a onclick="JavaScript:test(bb);" >BBBBBB</a></li>
<li><a onclick="JavaScript:test(cc);" >CCCCCCCC</a></li>
<li><a onclick="JavaScript:test(dd);" >DDDDDDDDDD</a></li>
麻烦帮我看哈，这样写怎么是错的
最好把你的html代码也贴上来吧
不然我们给出js代码，估计你也不会如何修改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #3CF;
margin: 0px;
padding: 0px;
font-family: "Arial Black", Gadget, sans-serif;
color: #906;
}
.tou{
margin-top:20px;
height: 40px;
width: 500px;
margin-right:auto;
margin-left:auto;
background-color: #6c2e17;
}
.tou ul{
height: 30px;
width: 500px;
display:block;
background-color: #6c2e17;

margin-top:10px;
}
.tou ul li{
float:left;
display: block;
display:inline;
margin-left:10px;
background-image: url(Image/BG2.jpg);
background-repeat: no-repeat;
background-position: right top;
height: 30px;
}
.tou a{
display: block;
background-image: url(Image/BG1.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align:center;
line-height:30px;
}
.nei{
margin:0 auto;
height: 300px;
width: 500px;
background-color: #f8d5c2;
border: 1px solid #9F5228;
}
#aa,#bb ,#cc ,#dd{
margin:0 auto;
height: 300px;
width: 500px;
background-color: #f8d5c2;

}
#aa{
background-color: #96F;
display:block;
}
#bb{
background-color: #6FF;
display:none;

}
#cc{
background-color: #F6F;
display:none;

}
#dd{
background-color: #966;
display:none;

}

</style>
<script type="text/javascript" language="javascript">
   function openAA()
    {
document.getElementById("aa").style.display="block";
document.getElementById("bb").style.display="none";
document.getElementById("cc").style.display="none";
document.getElementById("dd").style.display="none";
}
   function openBB()
   {
document.getElementById("aa").style.display="none";

document.getElementById("cc").style.display="none";
document.getElementById("dd").style.display="none";
document.getElementById("bb").style.display="block";
}
function openCC(){
document.getElementById("aa").style.display="none";
document.getElementById("bb").style.display="none";

document.getElementById("dd").style.display="none";
document.getElementById("cc").style.display="block"; }
function openDD(){
document.getElementById("aa").style.display="none";
document.getElementById("bb").style.display="none";
document.getElementById("cc").style.display="none";
document.getElementById("dd").style.display="block";
}


</script>
</head>
<body>
<div  class="tou">
<ul>
<li><a onmouseover="JavaScript:openAA();" >AAAA</A></li>
<li><a onmouseover="JavaScript:openBB();" >BBBBBB</a></li>
<li><a onmouseover="JavaScript:openCC();" >CCCCCCCC</a></li>
<li><a onmouseover="JavaScript:openDD();" >DDDDDDDDDD</a></li>
</ul>
</div>
<div class="nei" >
<div id="aa">
aaaaaaaaa
</div>
<div id="bb">
bbbbbbbb
</div>
<div id="cc">
CCCCCCCCC
</div>
<div id="dd">
dddddddddd
</div>
</div></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: #3CF;
    margin: 0px;
    padding: 0px;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #906;
    }
.tou{
    margin-top:20px;
    height: 40px;
    width: 500px;
    margin-right:auto;
    margin-left:auto;
    background-color: #6c2e17;
}
.tou ul{
    height: 30px;
    width: 500px;
    display:block;
background-color: #6c2e17;

    margin-top:10px;
}
.tou ul li{
    float:left;
    display: block;
    display:inline;
    margin-left:10px;
    background-image: url(Image/BG2.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    height: 30px;
    }
.tou a{
    display: block;
    background-image: url(Image/BG1.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    text-align:center;
    line-height:30px;
        }
.nei{
    margin:0 auto;
    height: 300px;
    width: 500px;
    background-color: #f8d5c2;
    border: 1px solid #9F5228;
    }
#aa,#bb ,#cc ,#dd{
    margin:0 auto;
    height: 300px;
    width: 500px;
    background-color: #f8d5c2;

    }
    #aa{
    background-color: #96F;
    display:block;
}
    #bb{
    background-color: #6FF;
    display:none;

}
    #cc{
    background-color: #F6F;
    display:none;

}
    #dd{
    background-color: #966;
    display:none;

}


</style>
<script type="text/javascript" language="javascript">
var openFun=function(objId){
var obj=document.getElementById(objId);
var prentObj=document.getElementById("nei");
var node=prentObj.getElementsByTagName("div");
for(var i=0;i<node.length;i++){
if(node[i].parentNode==prentObj){
node[i].style.display="none";
if(node[i]==obj) node[i].style.display="block";
}
}
};
</script>
</head>
<body>
<div  class="tou">
<ul>
<li><a href="#" onmouseover="openFun('aa');" >AAAA</A></li>
<li><a href="#" onmouseover="openFun('bb');" >BBBBBB</a></li>
<li><a href="#" onmouseover="openFun('cc');" >CCCCCCCC</a></li>
<li><a href="#" onmouseover="openFun('dd');" >DDDDDDDDDD</a></li>
</ul>
</div>
<div class="nei" id="nei">
<div id="aa">
aaaaaaaaa
</div>
<div id="bb">
bbbbbbbb
</div>
<div id="cc">
CCCCCCCCC
</div>
<div id="dd">
dddddddddd
</div>
</div></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
    margin: 0px;
    padding: 0px;
}
body{
    background-color: #3CF;
    margin: 0px;
    padding: 0px;
    font-family: "Arial Black", Gadget, sans-serif;
    color: #906;
    }
.tou{
    margin-top:20px;
    height: 40px;
    width: 500px;
    margin-right:auto;
    margin-left:auto;
    background-color: #6c2e17;
}
.tou ul{
    height: 30px;
    width: 500px;
    display:block;
background-color: #6c2e17;

    margin-top:10px;
}
.tou ul li{
    float:left;
    display: block;
    display:inline;
    margin-left:10px;
    background-image: url(Image/BG2.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    height: 30px;
    }
.tou a{
    display: block;
    background-image: url(Image/BG1.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    text-align:center;
    line-height:30px;
        }
.nei{
    margin:0 auto;
    height: 300px;
    width: 500px;
    background-color: #f8d5c2;
    border: 1px solid #9F5228;
    }
#aa,#bb ,#cc ,#dd{
    margin:0 auto;
    height: 300px;
    width: 500px;
    background-color: #f8d5c2;

    }
    #aa{
    background-color: #96F;
    display:block;
}
    #bb{
    background-color: #6FF;
    display:none;

}
    #cc{
    background-color: #F6F;
    display:none;

}
    #dd{
    background-color: #966;
    display:none;

}


</style>
<script type="text/javascript" language="javascript">
var $=document.getElementById;
var lastEle;
window.onload=function(){
lastEle=$("aa");
}
       function openAA(id)
        {
        var tempEle=$(id);
        lastEle.style.display="none";
        lastEle=tempEle;
        tempEle.style.display="block";  }


</script>
</head>
<body>
<div  class="tou">
<ul>
<li><a onmouseover="JavaScript:openAA('aa');" >AAAA</A></li>
<li><a onmouseover="JavaScript:openAA('bb');" >BBBBBB</a></li>
<li><a onmouseover="JavaScript:openAA('cc');" >CCCCCCCC</a></li>
<li><a onmouseover="JavaScript:openAA('dd');" >DDDDDDDDDD</a></li>
</ul>
</div>
<div class="nei" >
<div id="aa">
aaaaaaaaa
</div>
<div id="bb">
bbbbbbbb
</div>
<div id="cc">
CCCCCCCCC
</div>
<div id="dd">
dddddddddd
</div>
</div></body>
</html>
cb1156
luxu001207
谢谢你们两位
还有楼上那些朋友
var $=document.getElementById;
这里为什么用$  符号啊