关于4幅广告的轮换js实现

首先我先说吧！这个技术在百度一搜一大把，关键是，我刚刚接触javascript我看不懂。里面一堆一堆的代码。我只是想实现一个简单的广告轮换的功能而已。不用那么复杂。然后呢，我自己摸出来了。虽然不全是我自己的东西多少还是参考了网上的代码。之前我是打算用for循环嵌套实现的。调试后，我发现其中的关系根本不是我得出的逻辑理论一样，但是最后还是让我结合之前自己的代码写出来了。我主要是想看看还有没有更好地方法。各位高手帮忙看看啊！
之前的错误代码！<!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>上机3</title>
<script type="text/javascript">
function show(){
for(var i=0;i<4;i++){
var id="img"+i;
document.getElementById(id).style.display='block';

setTimeout("shownone("+id+")",5000);

}

}
function shownone(id){
for(var j=0;j<4;j++){
var id2="img"+j;
if(id!=id2){
document.getElementById(id2).style.display='none';
}

}
document.getElementById(id).style.display='none';
}
setInterval("show()",1000);


</script>
<style type="text/css">
img {
display: none;
}
</style>
</head><body onload="show()">
<div id="conten">
<img src="images/class1-1.jpg"id="img0"/>
<img src="images/class1-2.jpg" id="img1"/>
<img src="images/class1-3.jpg" id="img2"/>
<img src="images/class1-4.jpg"id="img3"/>
</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>上机3</title>
<script type="text/javascript">
var index=0;
function show(){ for(var i=0;i<4;i++){

var id="img"+index;
if(i==index){
document.getElementById(id).style.display='block';
}else{
var id2="img"+i;
document.getElementById(id2).style.display='none';
}

}
index++;
if(index>=4){
index=0;}
}
setInterval("show()",2000);
</script>
<style type="text/css">
img {
display: none;
}
</style>
</head><body onload="show()">
<div id="conten">
<img src="images/class1-1.jpg"id="img0"/>
<img src="images/class1-2.jpg" id="img1"/>
<img src="images/class1-3.jpg" id="img2"/>
<img src="images/class1-4.jpg"id="img3"/>
</div>
</body>
</html>我想问还有没有其他的方法啊，求解释啊！各位前辈小弟先谢了。

解决方案 »

  1.   

    这个方法已经很好了想再简单。。就用JQUERY了
      

  2.   

    var arr=["images/class1-1.jpg","images/class1-2.jpg","images/class1-3.jpg","images/class1-4.jpg"];
    var i=0;
    function show(){
       document.getElementById("conten").getElementsByTagName("img")[0].src=arr[i];
       i=i+1
       setTimeOut(show(),5000);
    }html
    <div id="conten">
        <img src="images/class1-1.jpg"id="img0"/>
    </div>
      

  3.   

    代码最少的用FLASH或加XML
    再或swfobject.
      

  4.   

    http://www.jwindowsns.com/demo/你可以看看这里的广告类中的轮播广告