Question

我对jQuery有点新意，但我需要编写一个小的自定义图像旋转器。基本上我会有一小堆.png图像看起来像宝丽来。旋转器需要将顶部一个拉开，向右移动，将Z-index设置为低于另外两个，然后将其向后移动...就像您在查看一堆图片时一样。

我认为我能做到的大部分，但我不太明白的问题是我需要不断交换这3张图片的Z-index（将顶部图像向右移动，重置z-index低于另外两个，后退）

在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-index而无需一遍又一遍地对其进行硬编码的任何线索？

Answer 1

不要改变z-index，而应考虑为所有照片提供相同的z-index，并按照需要显示的顺序将它们重新连接到父节点。这消除了对“无限”z索引的需求，以获取照片上方和下方的内容。

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

// assuming you have a handle to the element `photoElement`

photoElement.parentNode.appendChild(photoElement);

Answer 2

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

您也可以尝试不使用z-indexing并且可能操纵元素的位置（dom树中的“down down”元素将显示在其他元素的顶部），因此可能将其移动到站点，将其添加到第一个img，然后将其滑回原位。

Answer 3

如何在背后的中使用display:none;，这是不可见的？

Answer 4

我会考虑使用display：none / block而不是更改z-index。 Z-index图像画廊在过去只会给我带来麻烦。

这是我在谷歌上发现的一个片段。 Source

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

在jQuery中无限更改z-index

4 个答案: