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;
}

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

1 个答案: