jquery幻燈片效果不工作時重新啓動通過圖像循環

Question

我有一段代碼循環通過名爲div中的圖像。每個圖像依次顯示，調用jQuery幻燈片效果，使幻燈片更有趣。一旦幻燈片效果完成，我隱藏之前顯示的圖像，以便稍後再次滑動。

一切都只是當我回到展現在div第一個圖像，此時幻燈片效果不會顯示細膩。這個模式在循環中每次迭代都會重複。

這個頁面的CSS設置IMG有顯示：無，使得所有圖像intially隱藏。

的代碼如下：

$(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，我改變了我的CSS，以便#slider IMG過的z-index：100;然後更改我的代碼，如下所示：

$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(); 
    }); 
}); 

Answer 1

圖像的z-index控制什麼重疊什麼。

這可能是在你的幻燈片中的第一個圖像具有最低的z-index，所以當它在幻燈片跨最後圖像幻燈片，它實際上是推拉門，最後一個圖像的下方。只有當您隱藏最後一張圖片時纔會顯示。您需要使滑動動畫具有更高的Z-index，例如

.ui-effects-wrapper { 
     z-index: 100 !important; 
}