在 jQuery 中无限更改 z-index

Change z-index infinitely in jQuery

本文关键字：z-index 无限 jQuery      更新时间：2023-09-26

我对jQuery有点陌生，但我需要编写一个小的自定义图像旋转器。 基本上，我会有一小摞看起来像宝丽来的.png图像。 旋转器需要拉下顶部的那个，将其向右移动，将 Z 指数设置为低于其他两个，然后将其移回......就像你在看一堆图片一样。

我认为

我可以做到其中的大部分，但我不太明白的问题是我需要不断交换这 3 张图像的 Z 索引（将顶部图像向右移动，将 z 索引重置为低于其他两个图像，向后移动）

在 HTML 中，我有以下内容：

<img src="images/polariod_1.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_2.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_3.png" width="255" height="260" alt="Singer" class="headerrightgraphic">

关于我如何以优雅的方式更改这些 z 索引而无需一遍又一遍地硬编码的任何线索？

与其更改 z 索引，不如考虑为所有照片提供相同的 z 索引，并按显示所需的顺序将它们重新附加到父节点。这消除了对"无限"z索引的需求，以获取照片上方和下方的内容。

例如，如果用户可以单击一个将其拉到顶部，只需将其重新附加到父节点：

// assuming you have a handle to the element `photoElement`
photoElement.parentNode.appendChild(photoElement);

我会说将值存储在JS的全局变量中，使用jquery中的.data函数或使用一些隐藏的输入来保存当前的z索引。

你也可以尝试不使用z-indexing，也许可以操纵元素的位置（dom树中"向下"的元素将出现在其他元素的顶部），所以也许可以将其移动到站点，将其附加到第一个img，然后将其滑回原位。

在后面的图像中使用display:none;，看不到怎么办？

我会考虑使用display：none/block而不是更改z索引。Z 索引图像库过去只给我带来了麻烦。

这是我在谷歌上找到的一个片段。 源

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein');}, 
  3000);
});
相关文章：