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

Question

我制作了一个 jsfiddle 以便您可以重现该错误： FIDDLE

我实现了一个轮播来显示 3 张图片。有一个当前图像（正在显示的图像），另外两个保持隐藏状态，直到我单击其中一个横向箭头，导致下一个图像从覆盖（现在是上一个）当前图像的一侧滑动。

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

TIA

Answer 1

jsfiddle 问题在于隐藏方法，您只是简单地隐藏它，为隐藏方法添加幻灯片过渡。将此行 currLandscape.hide(); 更改为 currLandscape.hide("slide");

Answer 2

这里的根本问题与三个图像的 z 顺序有关。您的幻灯片动画仅在滑入图像位于显示图像上方的位置显示； "broken" 转换实际上正在发生，它们只是被 "higher" 可见图像遮挡了。

您可以通过显式设置新图像和当前图像的 z-index 来解决此问题。比如右边的过渡：

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

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

Fiddle

Answer 3

there seemed to be a problem with the order of the images also. please try this code out. The code is reuse of the previous image arrow code. Just try it out.

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

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

strange behaviour while sliding images on carousel

javascript

jquery

slide