Question

我在中心有一个图像，中间隐藏着一堆图像，当我点击下一步时我想要发生的是中心的图像向左移动（position.left当前 - 250px）我希望将下一个图像移动到（当前位置+ 250），然后设置动画（左-250px并显示），这样就像你点击下一步一样将它移开屏幕并将下一个图像移动到屏幕上。

我目前正在使用它，但是当动画结束时，由于某种原因，图像会跳转另外250像素？（左边是样式：-250px;）

$(document).ready(function() {
    $('#center-photo img:first').show();
    var imglist = $("#center-photo img");

    $('#next').click(function() {
        var active = $('#center-photo img:first');
        var next = active.next();
        var pos = $('#center-photo img:first').position();
        //Move current image out
        active
        .animate(
        { left: pos.left-250 + "px", opacity: 'hide' }, {
            duration: 'slow',
        });

        // Display next one and move in
        next.css('left', pos.left+0 + "px");

        next
        .animate(
        { left: pos.left-250 + "px", opacity: 'show' }, {
            duration: 'slow',
        });
    });
});

它在动画时看起来很好，它可以正常运行直到它跳到-250px而不是停留在动画结束时的位置。

我该如何解决这个问题？

示例：http://dubcanada.net/play/ex1/test.html

Answer 1

是的，您对该代码存在大量问题。

如果您希望动画按顺序发生，则第二次animate()来电和设置需要进入第一次complete来电的animate()回调。
无效定位的原因是您正在设置对象的left字段display: none即。隐藏，这不会产生正确的结果。将不透明度设置为0，show()设置下一个图像，然后设置left字段，然后设置动画到位置和可见性。
您没有重新排列图像的顺序，因此使用$("#center-photo img:first")无效，它将始终获得相同的第一个图像，.next()方法将获得下一个条目DOM。要解决此问题，您需要找到当前可见的图像，并按顺序查找下一个图像，如果需要，可以循环到开头。
您定义imglist，但随后重复重述选择器，这不是错误，但不是必需的。

以下是更正后的代码，我也添加了#prev方法。

演示：http://jsfiddle.net/qspSU/2/

var speed = 'slow'; /* Change this to 5000 to see the movement more clearly */
var imglist = $("#center-photo img");
imglist.filter(':first').show();

$('#prev').click(function() {
    var active = imglist.filter(':visible');
    var prev = active.prev();

    if (prev.size() == 0) {
        prev = imglist.filter(':last');
    }

    var pos = active.position();

    //Move current image out
    active.animate(
        {
            left: (pos.left + 250),
            opacity: 'hide'
        },
        {
            duration: speed,
            complete: function() {
                // Display next one and move in
                prev.css('opacity', 0).show().css('left', (pos.left - 250) + "px");
                prev.animate(
                    {
                        left: pos.left,
                        opacity: 1
                    }, {
                        duration: speed
                    });
            }
        });
});

$('#next').click(function() {
    var active = imglist.filter(':visible');
    var next = active.next();

    if (next.size() == 0) {
        next = imglist.filter(':first');
    }

    var pos = active.position();

    //Move current image out
    active.animate(
        {
            left: (pos.left - 250),
            opacity: 'hide'
        },
        {
            duration: speed,
            complete: function() {
                // Display next one and move in
                next.css('opacity', 0).show().css('left', (pos.left + 250) + "px");
                next.animate(
                    {
                        left: pos.left,
                        opacity: 1
                    }, {
                        duration: speed
                    });
            }
        });
});

如果您希望它们同时发生，那么只需在complete回调属性中获取该函数的内容，并将其放在与每个按钮单击事件中第一个动画相同的级别。

NB。 代码中仍然存在一个问题，即重复点击可能会导致问题，因为代码依赖于DIV的当前位置和可见性，因此如果有点击在另一个结束之前执行，这些职位可能会受到诽谤。使用信号量/互斥量变量来阻止它发生。

jquery图像幻灯片

1 个答案: