javascript - 无法在图像上定位文本

Question

在学习了我在 Stack Overflow 上找到的优秀教程之后，可以在这里看到:http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator/

我创建了我自己的，可以在这里看到； http://www.your-adrenaline-fix.com/

我的问题是 h2 文本有问题。

1. 首次加载页面时，您会短暂地看到所有 h2 杂乱无章。我不知道从哪里开始这个问题，如果有人不介意评论我如何纠正这个问题，我将不胜感激。

2. 如果我定位文本，使单行文本位于每张图片底部的正上方，当脚本到达包含 2 行文本的图片时，第 2 行现在位于图片正下方这看起来很糟糕，但我至少试验了几个小时，但无论文本行数如何，我似乎都无法让文本简单地显示在每张图片的底部附近。

我只提供了我认为合适的 css，但是，如果您需要更多，请随时在此处查看我页面的源代码；查看源代码:http://www.your-adrenaline-fix.com/或询问，我很乐意分享。

#featured h2 {
    border:none;
    font-size:41px;
    font-family:Helvetica;
    color:#fff;
    padding:5px;
    margin-bottom:auto;
    text-transform:uppercase;
    height:auto;
    overflow:hidden;
    position:absolute;
    top:310px;
    text-shadow:1px 3px 2px #000;
    text-align:center;
    letter-spacing:-1px;
    width:450px;
}

我提前感谢你们每一位，斯图尔特·K

Answer 1

你的文字位置是从顶部开始的，这就是为什么它超出了图像，你需要从底部开始放置文字，这样它就不会超出图像

有点像

#featured h2 {
    bottom: 20px;
    // remove top property
}

我只用底部替换了顶部并编辑了像素数量。您可以从此处根据需要进行调整。

针对加载页面时的显示问题。您可以先使用 js/jquery 隐藏 h2，然后在页面加载后让它们再次出现。

这是基本结构，我把编码留给你，因为我不确定你对/jsjquery 的了解程度

1) 在你的css中，隐藏h2标签，这不需要js

2) 在窗口加载时(因此加载图像)，显示 h2 标签

$(window).load(function() {
     // show desired content now
     // you could do transitions here but I will leave that up to you to figure out
     $('#featured .container h2').show(); 
});

更新

您需要在 css 中以不同的方式设置幻灯片，它现在不起作用，因为内容容器中的所有内容都是绝对定位的，这意味着它已从正常流程中删除。这使您的内容容器的高度为 0，这就是您的文本位于容器上方的原因。我所做的是使图像不是绝对的，所以这会给你的容器一个高度，并应用 display none 来隐藏它们，因为我们不想一次看到它们。由于您的脚本将当前显示的容器标记为 .current 类。我们只需要定位要显示的 img。由于容器具有高度，文本的位置现在设置为距容器底部 20px，在本例中为图像底部，因为图像是容器中的全部内容

// only the current slide image will show up
#featured div.container.current img {
    display: block;
}
// remove position absolute and hide the images
#featured div.container img {
    display: none;
    position: absolute; // remove this line
}

更新:

对于 h2 标签，在你的 css 中做

visibility: hidden;

然后添加

#featured div.container.current h2 {
    visibility: visible;
}

通过这种方式，文本会一直隐藏，直到您点击当前图像，看看是否可行