jquery - Z-Index 与物理位置和 jQuery

Question

在下面的标记中，如果所有 .image div 都是绝对定位且没有 z-index，“image 3”将是唯一可见的 div。可以这么说，我可以通过调整所有元素的 z-index 来“重新洗牌”牌组，或者我可以通过手动将最后一个 .image div 重新洗牌第一个，制作序列“图像 3、图像 1、图像 2”。

<div id="images">
  <div class="image">...image 1...</div>
  <div class="image">...image 2...</div>
  <div class="image">...image 3...</div>
</div>

假设我希望元素每隔几秒就从一个元素淡入另一个元素。我想首先显示“图像 3”，然后让它淡出，仅在显示“图像 1”后才出现。我可以通过给它一个比“图像 1”更低的 z 索引来实现这一点，或者在“图像 1”完全淡出后手动将其移动到“图像 1”之前。

z-index 问题...

我对使用 z-index 路线的保留是需要检查所有 .image div，只是为了找到具有最高 z-index 的 div，这样我就可以将其淡出。如果我手动移动它们，这会容易得多，我只需要求 $("div.image:last") 即可。此外，我必须重写 z-indexes，将“image 3”设置为 z-index:0；显示后，将所有其他项递增到 i+1。

手动移动元素的问题...

这看起来确实很草率，但正如上一段所指出的，它似乎是最简单的解决方案。我不确定它会对屏幕阅读器和其他需要可靠标记才能正常运行的工具产生什么影响。

这两种方法中哪一种最适合轮播型脚本，为什么？或者还有我没有考虑的第三种选择？

Answer 1

以 Peirix 和 Steerpike 的建议为基础。将 display:none 添加到您的 image 类，并将第一个 div 设置为 display:block。然后，您可以使用 :visible 选择器找到可见的 div，并与下一个 div 交叉淡入淡出:

function rotate() {
    // fade out the current div
    var activeEl = $("#images div:visible");
    $(activeEl).fadeOut("slow");

    // fade in the next div in the loop
    if ($(activeEl).next().length) {
        $(activeEl).next().fadeIn("slow");
    } else {
        $($(activeEl).siblings()[0]).fadeIn("slow");
    }

    setTimeout(rotate, 1000);
}

$(document).ready(function() {
    rotate();
});