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

【问题标题】：jquery image carousel doesn't work after two clicks点击两次后jquery图像轮播不起作用
【发布时间】：2012-04-22 03:29:54
【问题描述】：

我正在尝试制作一个简单的 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);

}

【问题讨论】：

为什么要重新发明轮子？那里有很多 jQuery 轮播插件。我的意思很多。
我需要在后面的过程中加入很多棘手的 php，而且我只是想学习如何做 jquery。对我来说，最好的学习方式是尝试并去做。此外，通过这种方式，我可以更轻松地对其进行自定义以满足我的确切需求。

标签： jquery image carousel

【解决方案1】：

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

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

【讨论】：

谢谢！这是一个很大的帮助！