title: JavaScript images deck shuffle through z-index
body: <p>I have images stacked over each other like a deck of cards, and each one has their z-Index changed in sequence through the code below, so that the final result is an animation. However, it is linear and it doesn't reverse the order, and I would like it to animate both forward and backward. I don't want code, but I do want ideas of what can be done. I'll eventually come up with the code =)</p>
  
  <hr>
  
  <pre><code>var imageArray = [];
  
  function placeImage(x) {
      var div = document.getElementById("div_picture");
      div.innerHTML = ""; // clear images
  
  for (counter=1;counter&lt;=x;counter++) {
      var image=document.createElement("img");
      image.src="bola/bola"+counter+".png";
      image.width="500";
      image.height="500";
      image.alt="bola"+counter;
      image.id="imagem"+counter;
      image.style.backgroundColor="rgb(255,255,255)"
      image.style.position="absolute";
      image.style.zIndex=counter;
      div.appendChild(image);
      imageArray[counter-1] = document.getElementById("imagem"+counter);
      }
  };
  
  var imageShuffle = function(x) {
      imageArray[x-1].style.zIndex=0;
      for (counter=0;counter&lt;x;counter++) {
          imageArray[counter].style.zIndex++;
      }
      imageArray.splice(0, 0, imageArray[x-1]);
      imageArray.pop();
  };
  
  window.onload = function() {
      placeImage(14);
      document.getElementById("div_picture").onclick=function() {setInterval("imageShuffle(14)",1000/14)};
  };
  </code></pre>