学js时 遇到的问题 大虾们 谢谢援助！！！！

怎样让图片交换起来呢 ？ 实在是写不出来  跪求 援助！！！！
<html>
<head>
<title>幻灯片</title>
</head>
  <body>
   <!--外框-->
   <div id="main" style="border:3px solid #000; width:305px; height:305px;">
   <div id="main1"> </div>
   <!--图片层-->
   <div id="div_pic" style="display:none;">                   
   <span  id="11" style="position:absolute; z-index:1;"><img style="width:300px;height:300px;" src="01.jpg"/></span>
   <span  id="22" style="position:absolute; z-index:2;"><img style="width:300px;height:300px;" src="02.jpg"/></span>
   <span  id="33" style="position:absolute; z-index:3;"><img style="width:300px;height:300px;" src="03.jpg"/></span>
     <span  id="44" style="position:absolute; z-index:4;"><img style="width:300px;height:300px;" src="04.jpg"/></span>
   </div>
   <div style="position:absolute; z-index:5; background-color:#eee;">
   <span id="1">1</span>|<span id="2">2</span>|<span id="3">3</span>|<span id="4">4</span>
   </div>
   </div>
   <script type="text/javascript">   function show_img(){
   var i=0;
   var a=document.getElementById("div_pic");
   var pic=a.document.getElementsByTagName("img");       
     //alert(pic[0].src);
     var m=document.getElementById("main1");
     var pics=new Array(pic[i].src);
     for(i=0;i<pic.src.length){
     
      }
   }
  
   setInterval('show_img()',3000);
   </script>   </body>
</html>