Question

按照我在Stack Overflow上找到的优秀教程后可以看到：http://fearlessflyer.com/2012/12/how-to-create-a-jquery-image-rotator/

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

我的麻烦是我遇到了h2文本的问题。

当页面首次加载时，您会短暂地看到所有h2的乱七八糟的混乱。我不知道从哪里开始，如果有人不介意评论我如何纠正这一点我会非常感激。
如果我定位文本以使单行文本位于每个图像底部的正上方，当脚本使用2行文本到达图像时，第2行现在远低于图像中的图像看起来很可怕的方式，但我至少在几个小时内尝试了这个，而且无论文本行的数量多少，我似乎都无法将文本简单地显示在每个图像的底部附近。

我只提供了我觉得合适的CSS，但是，如果您需要更多，请随时查看我的页面来源; view-source：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;
}

我事先感谢你们每个人， Stuart 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;
}

这样一来，文本就会被隐藏，直到你点击当前图片，看看是否有效

麻烦在图像上定位文本

1 个答案: