0

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

这是我的完整代码：http: //jsfiddle.net/6fwbS/19/

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

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);

}
4

1 回答 1

1

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

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

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（编辑：更新了指向分叉版本的链接。）

于 2012-04-21T19:29:54.280 回答