jQuery - 在旋转图像上方显示文本答案

【问题标题】：jQuery - Display text above rotating imagejQuery - 在旋转图像上方显示文本
【发布时间】：2011-12-03 09:19:19
【问题描述】：

HTML 代码：

<div id="img-wrapper">
  <img src="images/1.png" title="Picture 1" class="my-img" />
  <img src="images/2.png" title="Picture 2" class="my-img" />
  <img src="images/3.png" title="Picture 3" class="my-img" />           
</div>

样式：

#img-wrapper {
position: relative;
width: 200px;
height: 100px;
}
.my-img {
display: none;
position: absolute;
top: 0;
left: 0;
}

我使用 jquery 来旋转图像（效果很好）。但我希望在此图像上方显示文本。我确实尝试在 img-wrapper 的底部包含一个 DIV。但是该文本显示在图像后面。我使用fadeIn() 和fadeOut() 在旋转时显示图像。

如何在图片上方放置一个div？

编辑

我对代码做了一些更改。我现在正在使用 Cycle 插件根据这个问题的答案显示图像：jQuery - Image rotation gets faster when focused after the focus was on another Chrome Tab

现在，我以前显示文本的解决方案不起作用！ :(

编辑

上述问题的解决方案：使用更高的 z-index 值。

【问题讨论】：

您可以在 jquery 中使用硬币滑块插件检查它workshop.rs/2010/04/…

标签： jquery html

【解决方案1】：

只需设置要放置在图像上方的 div 的z-index：

.div-above-images {
    z-index: 1;
    position: absolute;
}

见https://developer.mozilla.org/en/Understanding_CSS_z-index/Adding_z-index

Warning! z-index only has an effect if an element is positioned.

【讨论】：

是的。那成功了。 :) 我之前曾尝试过 z-index（在发布此问题之前）。但没有打扰使用绝对位置。谢谢
@VppMan Np。上面的 MDN 链接说 z-index 只有在元素被定位时才会生效。
谢谢。大多数时候，我在 CSS 方面都采用试错法。
我想，我明白了。我为 z-index 使用了更高的值

【解决方案2】：

您可以在#img-wrapper 之前创建 div。有什么理由不这样做？

【讨论】：

但是当图片淡入时该文本将被隐藏！
你是说图片淡入时图片会覆盖文字吗？它不应该；假设您在
...
上方有一个
Text
。 #img-wrapper 不应涵盖#caption。对于#img-wrapper 中的每个更改，您还可以更新#caption 的innerHTML。

【解决方案3】：

使用 jQuery 的可能解决方案是：

$('#img-wrapper').before('<div>text</div>');

【讨论】：

但是当图片淡入时它们会被隐藏！！我已经测试过了。

【解决方案4】：

你需要这个

$('#img-wrapper img:first').before('<div>text</div>');

【讨论】：