2

名前付きの div 内の画像をループするコードがあります。各画像は順番に表示され、jquery スライド効果が呼び出されて、スライドショーが少し面白くなります。スライド効果が完了したら、以前に表示されていた画像を非表示にして、後で再びスライドできるようにします。

div の最初の画像を表示するために戻ったときを除いて、すべて問題ありません。その時点では、スライド効果は表示されません。このパターンは、ループの反復ごとに繰り返されます。

ページの css は img を display:none に設定し、すべての画像が最初は非表示になるようにします。

コードは次のとおりです。

$(function()
{
    // Sort out the handling of the slider (if it exists)
    if ($('#slider').length != 0)
    {
        var allImgs = $('#slider img');
        var $active = allImgs.eq(0);

        $active.show(0, function()
        {
            var $next = $active.next();
            var timer = setInterval(function() 
            {
                // Make the effect happen on the next one in the list
                $next.show("slide", { direction: "left" }, "slow", function()
                {
                    $active.hide(0, function()
                    {
                        $active = $next;
                        $next = (allImgs.last().index() == allImgs.index($active)) ? 
                                allImgs.eq(0) : $active.next();
                    });
                });
            }, 5000);
        });
    }
});

私には、コードはうまくいくように見えます-何が欠けているのでしょうか?

編集

mccannfのおかげで、 #slider img が z-index:100; を持つように CSS を変更しました。次に、コードを次のように変更しました。

$next.show("slide", { direction: "left" }, "slow", function()
{
    $next.css("z-index", 99);
    $active.hide(0, function()
    {
        $active.css("z-index", 100);
        $active = $next;
        $next = (allImgs.last().index() == allImgs.index($active)) 
                ? allImgs.eq(0) : $active.next();
     });
 });
4

1 に答える 1

0

画像のz-indexは、何が何と重なるかを制御しています。

スライドショーの最初の画像のz-indexが最も低い可能性があるため、スライドショーの最後の画像をスライドすると、実際にはその最後の画像の下をスライドします。最後の画像を非表示にした場合にのみ表示されます。スライドアニメーションのz-indexを高くする必要があります。

.ui-effects-wrapper {
        z-index: 100 !important;
}
于 2012-10-30T17:39:18.167 に答える