Rotador de imagenes en Javascript se vuelve loco

[Julcar]

Para ilustrarles mejor mi caso:

HTML:

Código HTML:

<div id="slider">
  <div class="wrapper">
    <div id="slider_images">
      <div id="photo-1">
        <img src="blabla" id="image-1" />
        <h4>bla bla</h4>
       </div>
       <div id="photo-2">
        <img src="blabla" id="image-2" />
        <h4>bla bla</h4>
       </div>
       <div id="photo-3">
        <img src="blabla" id="image-3" />
        <h4>bla bla</h4>
       </div>
     </div>
   </div>
</div>
 

Código CSS:

div#slider {
  width:100%;
  background:rgb(46,46,46);
  border-bottom:5px solid rgb(1,133,230);
}
 
 
div#slider div#slider_images {
  height:270px;
  overflow:hidden;
}
 
div#slider div#slider_images div {
  height:270px;
}
 
div#slider div#slider_images div img {
  width:100%;
}
 
div#slider div#slider_images div h4 {
  position:relative;
  top:-8em;
  background:#464646;
  width:50%;
  text-align:left;
  margin-left:3em;
  padding:15px 0 15px 30px;
}
 
div#slider div#slider_images div h4 a {
  color:#FFFFFF;
  text-decoration:none;
}
 
div#slider div#slider_images div h4 a:hover {
  text-decoration:underline;
}
 

Y el javascript

Código Javascript:

function rotateImages()
      {
        var imageContainer = document.getElementById("slider_images");
        var imageList = imageContainer.getElementsByTagName("div");
        
        for (i = 0; i < imageList.length; i++){
          if (!imageList[i].style.display){
            imageList[i].style.display = "block";
          }else{
            if (imageList[i].style.display == "block"){
              imageList[i].style.display = "none";              
            }else{
              imageList[i].style.display = "block";  
            }
            setTimeout(rotateImages,10000);
          }
        }
      }
 

No tengo idea de como hacer que el javascript recorra en orden los divs y aparezcan en la misma secuencia