JavaScript图像在z索引中移动

我把图像像一副卡片一样叠在一起，通过下面的代码，每一张图像的z索引都按顺序改变，这样最终的结果就是一个动画。但是，它是线性的，并且不会颠倒顺序，我希望它能够向前和向后设置动画。我不想要代码，但我想要的是能做什么的想法。我最终会给出代码=）

---

var-imageArray=[]；
函数placeImage（x）{
var div=document.getElementById（“div_图片”）；
div.innerHTML=“；//清除图像
对于（counter=1；counter您可以保留指向数组中图像的指针，以便使用
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)
})

imgs=document.getElementsByTagName（'img'）；//以防您没有图片。
//首先，我们创建一个按zIndex排序的函数
函数sortZ（a，b）{
//如果未设置为零，请确保定义了z索引
var b=b.getAttribute（'z-index'）？b.getAttribute（'z-index'）：0；
var a=a.getAttribute（'z-index'）？a.getAttribute（'z-index'）：0；
if（ab）{
返回1；
}
返回0；
}
函数convertDomObject（domObject）{
var-domArr=[]；
对于（var i=0；i
遵循jQuery UI的指导，停止使用
zIndex
来操纵堆叠顺序。为所有div指定一个公共父级（如果它们还没有），并依靠DOM为您堆叠元素。在任何公共“堆叠组”内元素将按DOM顺序堆叠，因此您可以使用DOM操纵来重新排列同级元素的顺序，以更改它们的堆叠顺序。@Alnitak您有没有使用
position:absolute
来进行此操作？@raam86很可能是的。好的，但是像我这样使用纯JavaScript是不好的做法？这是针对JavaScript项目的，我担心使用jqueryy将违反老师设定的规则。但是谢谢！编辑：因为我不想发垃圾邮件。这是对下面评论的回答。我现在明白了，我将继续学习该方法并尝试实现它！再次感谢！我从未说过要使用jQuery，我只是建议遵循jQuery所做的。他们过去使用zIndex，但它会导致可怕的问题用于合成。在jQuery UI 1.10中，他们切换到了我上面描述的方法。使用他们的可拖动元素，您单击的任何元素都会移动到最后一个同级元素，因此它会自动显示在最上面。谢谢！这是个主意，尽管我不喜欢看代码。我不能投票，因为我缺乏“声誉”如果您喜欢答案，请单击计票下方的勾号将其标记为选中。
 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)
})