0

遵循我在 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 行文本的图像时，第二行现在远低于图像，看起来很可怕但我对此进行了至少几个小时的试验，无论文本行数如何，我似乎都无法让文本简单地显示在每个图像的底部附近。

我只提供了我认为合适的 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;
}

我提前感谢你们每一个人，Stuart K

4

1 回答 1

0

您的文本位置从顶部开始，这就是它超出图像的原因，您需要从底部定位文本，这样它就不会超出

就像是

#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;
}

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

于 2013-08-16T15:27:06.453 回答