Javascript 创建滑块函数

我正在创建一个旋转木马，我知道那里有插件，但我想创建自己的插件。我正在努力将这段代码放在函数中，因为我必须返回一个true或false值，代码才能再次运行。到目前为止，我重复了以下代码：

if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }

我已将其放入如下函数中：

function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});  

}

我试着这样称呼它：

if(!active) {
        active = true;
        slider(left_indent, left_value);
    }

每次调用该函数时，我似乎都无法激活以返回false。我不确定我错过了什么

这是我迄今为止的全部代码：

$(function () {
var item_width = $("#box li img").outerWidth();
var left_value = item_width * (-1);

$('#box li:first').before($('#box li:last'));
$('#box ul').css({ 'left': left_value });

var active = false;
$("#next").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) - item_width;

    if(!active) {
        active = true;
        $('#box ul').animate({ 'left': left_indent }, 500, function () {
            $('#box li:last').after($('#box li:first'));
            $('#box ul').css({ 'left': left_value });
            active = false;
        });
    }
    return false;
});

$("#back").click(function () {
    var left_indent = parseInt($('#box ul').css('left')) + item_width;

    if(!active) {
        active = true;
        slider(left_indent, left_value);
    }
    return false;
});

})

函数滑块左缩进，左值{ $'box ul'。动画{'left'：左缩进}，500，函数{

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    var active = false;
});  

}

---

任何建议都很好。提前谢谢你，你不能以一种有用的方式从回调函数返回这样的函数。因为在回调函数改变它之前，外部函数将返回活动状态。此外，你还用“var”重新定义/重新定义了活动状态，这样你就不会改变外部活动状态。你需要的是在共享的回调函数中保持活动状态范围，并在单击处理程序上执行测试

比如：

var active = false;

//assumes left_indent, left_value defined further up
$('#slideRightBtn').click(function(){
    if(!active){ slider(left_indent,left_value)); }
});

function slider(left_indent, left_value) {

    //Don't use 'var' for active here
    //that sets a new var 'active' in the scope of this func

    active = true;
    $('#box ul').animate({'left' : left_indent}, 500,function(){   

        $('#box li:first').before($('#box li:last'));          
        $('#box ul').css({'left' : left_value});


        active = false;
    });
}

如果要修改外部作用域中的变量或全局变量，只需从函数中的最后一行代码中删除var即可，只需：

function slider(left_indent, left_value) {
$('#box ul').animate({'left' : left_indent}, 500,function(){   

    $('#box li:first').before($('#box li:last'));          
    $('#box ul').css({'left' : left_value});

    active = false; // Changed!
});

---

注意：……但请不要这样做。事实上，你可以这样做——在外部范围内修改变量，而不仅仅是访问它的值，这对于Javascript来说是一件坏事——例如，在像Python这样的健全语言中，你不能这样做！一些Javascript替换甚至使这不可能——实际上你必须对它使用特殊的语法，但是更流行的CoffeeScript恰恰相反：选择一本好的Javascript书籍，如果你继续学习更复杂的内容，就要学会编写结构良好的代码。

活动不在同一范围内。请参阅工作示例

---

然而，使用像active这样的信号量是不好的风格。

active是一个全局变量，我在顶部声明。。我会编辑我的问题，让你调用我的代码。我也会尝试设置一个JSFIDLE供你查看。这是我当前代码的JSFIDLE，谢谢你的回复。将该变量放在那里是一个愚蠢的错误。我我已经把你的代码放进去了，但我还是遇到了同样的问题。我在单击函数代码$back中调用它时会这样做。单击函数{var left\u indent=parseInt$'box ul'.css'left'+item\u width；if！active{active=true；sliderleft\u indent，left\u value；}返回false；}；哦，NM。错误的返回意图错误我会接受你的答案，但我只能接受1。你现在看到的工作示例也是正确的谢谢：我只能返回1张幻灯片。然后它停止。我可以让它不断返回，但如果你多次单击“返回”，它会变得有点不稳定。请参阅此示例-如果你单击“下一步”按钮您将看到我希望它做什么您让它工作了。谢谢：现在我将通过代码来学习我的错误啊，我知道我错在哪里了。我犯了一个非常愚蠢的错误。您有没有更好的方法建议我这样做？修改外部作用域值没有错。特别是在处理调用时使用一种具有一流函数和闭包的语言进行备份。@user720414我的错，我刚刚意识到它是动画完成时调用的函数。是的，对于事件处理程序或类似事件处理程序这样的东西，这是唯一可行的方法。对于苛刻的评论，很抱歉，刚开始的var突然出现在我的眼前我没有正确地理解其余的代码：@ErikReppen抱歉，我的错，我只是在更好地了解上下文之前回答了。事实上，对于像这样的事件处理程序，这是唯一实用的解决方案。对于其他情况，我总是倾向于强烈地倾向于黑暗面——函数编程及其纯度：@NeuronQ没关系。我有点困惑，因为我一直认为这是更好的方式。我确实从一个类开始，然后我切换它并将它放在当前的li上。然后我改变了主意，代码变得更好。谢谢你的帮助