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，我更改了我的 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();
     });
 });
4

1 回答 1

0

图像的 z-index 控制着什么重叠什么。

幻灯片中的第一张图像可能具有最低的 z-index，因此当它滑过幻灯片中的最后一张图像时，它实际上是在最后一张图像的下方滑动。仅当您隐藏最后一张图像时才会显示。您需要使滑动动画具有更高的 z-index，例如

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