1

我对 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 的任何线索，而无需一遍又一遍地硬编码？

4

4 回答 4

1

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

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

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

photoElement.parentNode.appendChild(photoElement);
于 2012-04-24T14:07:13.213 回答
0

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

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

于 2012-04-24T14:07:55.737 回答
0

后面看不到display:none;的图片要怎么用？

于 2012-04-24T14:08:15.283 回答
0

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

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

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.fadein');}, 
  3000);
});
于 2012-04-24T14:11:21.503 回答