0

このリンクにアクセスしてください。

ChromeまたはFirefoxで開いて複数回更新すると、次の画面が表示されます：

ここに画像の説明を入力

なぜこの問題が発生するのか、私には本当に理解できません。また、Chrome と Firefox の両方のブラウザーで firebug にエラーはありません。助言がありますか？

4

3 に答える 3

1

クラス「slides_control」のdom要素の高さが動的に設定されています。

18px の場合もありますが、370px の場合もあります。

高さを明示的に 370 ピクセルに設定すると機能しますが、コードで異なる値を設定している理由をさらに詳しく調べる必要がある場合があります。

于 2012-10-14T20:09:22.403 に答える
1

#front-slides高さ (この場合は 370px) を指定して に設定し、overflow: hidden;のオーバーフローを削除してみてください.slides_container。

これで問題が解決したようです。問題は、.slides_controlの高さが間違って設定されているようです。明らかに、画像が読み込まれる前に画像の高さに設定されているようです。

他の解決策は、.slides_controlの高さを手動で 370px に設定するか、ページが読み込まれるまで計算を変更することです。

于 2012-10-14T20:07:27.003 に答える
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 に答える