Question

我做了一个jsfiddle所以你可以重现这个bug： FIDDLE

我实施了一个旋转木马来显示3张图片。有一个当前图像（正在显示的图像），其他两个保持隐藏，直到我单击其中一个横向箭头，导致下一个图像从覆盖（现在上一个）当前图像的一侧滑动。

我已经花了2个小时试图弄清楚为什么某些特定的“过渡”动画似乎不起作用。例如，当单击左箭头从第一个图像传递到第二个图像以及从第二个图像传递到第二个图像时，动画工作正常，但再次单击它时，从3到1的过渡不会执行幻灯片动画。当向相反方向移动时（使用右箭头），只有一个过渡动画。我认为问题与click事件处理函数中的if有关，但无法找出导致它的原因。任何帮助将不胜感激。

TIA

Answer 1

这里的根本问题与三个图像的z顺序有关。幻灯片动画仅显示滑动图像位于显示图像上方的位置; “破碎”的过渡实际上正在发生，它们只是被“更高”的可见图像所掩盖。

您可以通过显式设置新图像和当前图像的z-index来解决此问题。例如，在右转换：

    prevLandscape.zIndex(1);
    currLandscape.zIndex(0);

如果你这样做，你还需要增加箭头的z-index，使它们在图像上方。

Fiddle

Answer 2

jsfiddle 问题在于隐藏方法只是隐藏它为hide方法添加幻灯片转换。将此行currLandscape.hide();更改为currLandscape.hide("slide");

Answer 3

图像的顺序似乎也有问题。请尝试使用此代码。代码是重用先前的图像箭头代码。试试吧。

$('.arrowRight').on('click',function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var nextDesc= currDesc.nextAll(".hiddenDesc").first();

    if (nextLandscape.length == 0) {
        nextLandscape = currLandscape.siblings('.hiddenImg').first();
    }
    if (nextDesc.length == 0) {
        nextDesc= currDesc.siblings('.hiddenDesc').first();
    }

    nextLandscape.show("slide", { direction: "right" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    nextLandscape.removeClass('hiddenImg').addClass('currImg');
});

在旋转木马上滑动图像时的奇怪行为

3 个答案: