My current code stack images like a deck of cards with changing z-Index values to create an animation. However, I am looking to make the animation reverse as well and not just go forward in a linear manner. I'm seeking ideas on how to achieve this without providing specific code. Any suggestions are appreciated as I work on implementing them myself later :)
var imageArray = [];
function placeImage(x) {
var div = document.getElementById("div_picture");
div.innerHTML = ""; // clear images
for (counter=1;counter<=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<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)};
};