创建Jquery幻灯片动画

我正在尝试创建自己的幻灯片， 我知道有很多插件可用，但我找不到任何符合我需求的插件

幻灯片本身是有效的，我遇到的问题是动画。 当你多次单击“下一步”按钮时，一切都会变得一团糟

.stop（）和.clearQueue（）函数都可以工作，因为这会使动画停止而不首先完成

资料来源：

预览：

感谢您的帮助

---

另外，幻灯片本身并不是在很长的时间内完成的，“巨大的图像”将被更改为较小的缩略图等。但我首先希望动画能够正常工作。

从查看您的脚本来看，您似乎正在进入比赛状态。您删除和添加类的速度比您想象的要快，因此创建了这样一个条件：当您打算只选择一个项目时，您选择了多个项目

例如：

slidecontent = $('.slidecontent');
slideimg.prepend(slidecontent.children('img').addClass('slidecontent'));
slidecontent.removeClass('slidecontent').addClass('slideleft thisclassc');

在

previmg

函数中，您有上面几行。如果您过快地单击触发此功能的按钮，则会在对象

slidecontent

中出现多个项目，因为您将同一类分配给了列表中的下一个元素。您需要以某种方式锁定该函数，直到它完成，或者您需要创建一个更具体的选择器

我认为最简单但不是最优雅的方法是创建一个锁定标志。然后，在函数运行之前测试锁定标志，以避免竞争条件，并设置即时超时，以便立即返回并忽略额外的点击次数：

var animActive = false;

$.fn.previmg = function(){
    $(this).click(function(){
        if(totalrightimg != 0 && animActive==false){
            animactive = true;
            setTimeout(function(){
                //everything else
                animactive = false;
            },0);
        }
        else if(totalrightimg == 0 && animActive==false){
            animactive = true;
            setTimeout(function(){
                //everything else
                animactive = false;
            },0);
        }
    }
});

如果您添加此变量，然后进行此检查，您将确保避免争用条件，因为您不会在每个操作之上运行这些操作。每次操作运行时，它都会锁定再次运行的能力，直到操作完成。因此，随后的单击将被忽略

如果这种行为是不可取的，那么您需要寻找一种方法来缩小“

slidecontent

”类的选择器范围，从而确保只选择一个元素

---

编辑：完全忽略对单击事件的同步处理。我的错。上面的代码将强制锁定和解锁到不同的作用域中，因此您应该可以安全地执行更改代码。

我自己也在考虑这个解决方案，但我不知道怎么做。结果很简单：P，非常感谢！祝你新年快乐有时，最难想到的事情是最容易实现的事情。我很高兴这对你有用。新年快乐。我正在尝试使用这个技巧，但仍然无法正常工作，因为它会在单击后立即使animactive=false。我试图添加一个延迟，但它不起作用：$.delay（2200，function（）{animative=false}）；有什么想法吗？确保活动声明和初始赋值是全局范围的，或者只初始化一次。我没有看到脚本的初始化函数，所以您唯一的选择是全局声明和分配初始值。将var设置为active=false；作为$（document）.ready（）之前脚本的第一行。通过这种方式，它只声明并分配了一次默认值。实际问题是，一旦单击，我需要有2200毫秒的延迟才能再次单击。如果我简单地将animactive=false放在click函数中，那么它将在单击之后再次为false，因此它与全局声明值无关。。