我将图像堆叠在一起,就像一副卡片,每个图像的z-Index按顺序通过下面的代码改变,因此最终结果是动画。但是,它是线性的并且它不会颠倒顺序,我希望它能够向前和向后动画。我不想要代码,但我确实想知道可以做些什么。我最终会想出代码=)
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)};
};
答案 0 :(得分:0)
您可以保持指向数组中图像的指针,以便使用Array.prototype.sort
MDN
通过这种方式,您将拥有任何顺序的图像数组,然后您可以对其进行操作。
imgs = document.getElementsByTagName('img'); //In case you don't have the pics.
//First we create function to sort by zIndex
function sortZ(a, b) {
//Make sure z-index is defined if not set to zero
var b = b.getAttribute('z-index') ? b.getAttribute('z-index') : 0;
var a = a.getAttribute('z-index') ? a.getAttribute('z-index') : 0;
if (a < b) {
return -1;
}
if (a > b) {
return 1;
}
return 0;
}
function convertDomObject(domObject) {
var domArr = [];
for (var i = 0; i < domObject.length; i++) {
domArr.push(domObject[i]);
}
return domArr;
}
var imgsArr = convertDomObject(imgs); //Use it !
imgsArr.sort(function (a, b) {
return sortZ(b, a)
})