0

请访问此链接。

当我在 chrome 或 firefox 上打开它并多次刷新时，我得到以下屏幕：

在此处输入图像描述

我真的不明白为什么会出现这个问题。此外，两种浏览器上的萤火虫都没有错误：Chrome 和 Firefox。有什么建议么？

4

3 回答 3

1

尝试给出#front-slides一个高度（在这种情况下为 370px）并将其设置为overflow: hidden;，然后删除.slides_container.

这似乎解决了我的问题，问题似乎是.slides_control高度设置错误，显然它在加载之前设置为图像高度。

您的其他解决方案是手动将.slides_control' 高度设置为 370px 或更改计算直到页面加载完毕。

于 2012-10-14T20:07:27.003 回答
1

具有“slides_control”类的 dom 元素的高度正在动态设置。

有时是 18px ，但在其他情况下是 370px 。

如果您将高度明确设置为 370 像素，它可以工作，但您可能需要进一步研究它为什么在您的代码中设置不同的值。

于 2012-10-14T20:09:22.403 回答
0

问题是，您的功能（与滑块相关）在所有图像加载之前触发。移动，window.onload如下所示

window.onload = function () {
    //##########################################
    // Front slides
    //##########################################

    $('#front-slides').slides({
        preload: true,
        preloadImage: 'design/img/elems/loading.gif',
        generateNextPrev: false,
        play: 5000,
        pause: 2500,
        hoverPause: true,
        animationStart: function(current){
            $("#headline h6").fadeOut("slow");
        },
        animationComplete: function(current){
            $slideCaption = $(".slides_container div.slide:eq("+ (current-1) +") .caption").text();
            $("#headline h6").text($slideCaption);
            if($slideCaption != ''){
                $("#headline h6").fadeIn("slow");
            }else{
                $("#headline").hide("slow");
            }
        }

    });

    // default headline
    $firstCaption = $(".slides_container div.slide:eq(0) .caption").text();
    if($firstCaption != ''){
        $("#headline h6").text($firstCaption);
    }else{
        $("#headline").hide();
    }

}
于 2012-10-14T20:19:37.923 回答