Question

我正在尝试制作一个简单的jquery图像轮播。

单击“增加”按钮将图像向左滑动并使其消失时，将调用以下函数。我遇到的问题是它似乎只能工作一次。第一次单击它会将下一个图像加载到容器中。第二次单击它会调用该警报两次。我不知道为什么它会在第二次点击时调用警报两次。第三次单击它时根本不会发出警报。任何帮助将不胜感激。有关最终目标的示例，请在运行后单击减少。我最终要做的就是在点击每个按钮时在容器中获取一个新图像，并在图像中来回循环。

function slide_img_left() {

    var imgs = imgArr.length;

    a++;
    if (a >= imgs) {
        a = 0;
    }

    b = a - 1;
    c = a + 1;

    if (b < 0) {
        b = imgs - 1;
    }
    if (c >= imgs) {
        c = 0;
    }

    $('.left_slot').animate({
        opacity: 0,
        left: '-=50px'
    }, 300, function() {
        $('.left_slot').remove();
    });

    $('.middle_slot').animate({
        left: '-=50px'
    }, 300, function() {
        $('.middle_slot').attr('class', 'left_slot');
        $('.right_slot').attr('class', 'middle_slot');
        alert(c);

    });

    $('.right_slot').animate({
        left: '-=50px'
    }, 300);

    $("#basic_div").append(imgArr[c][0]);
        $("#varsDiv").html(" var b = " + b + " var a = " + a + " var c = " + c);

}

Answer 1

问题是完整回调中的$('.left_slot')可能会引用由其他完整回调之一创建的新左侧插槽。

这是slide_img_left()修复的相关部分，因此它只发出一次警报：

var left = $('.left_slot');
var middle = $('.middle_slot');
var right = $('.right_slot');

left.animate({
    opacity: 0,
    left: '-=50px'
}, 300, function() {
    left.remove();
});


middle.animate({
    left: '-=50px'
}, 300, function() {
    middle.attr('class', 'left_slot');
    right.attr('class', 'middle_slot');
    alert(c);

});

right.animate({
    left: '-=50px'
}, 300);

链接到更新的jsFiddle（修改>更新了指向分叉版本的链接。）

点击两次后，jquery图像轮播不起作用

1 个答案: