jquery幻灯片效果在重新启动循环图像时不起作用

Question

我有一段代码循环遍历命名 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，我更改了我的 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;
}