Question

我想创建自己的幻灯片，我知道有很多插件可以使用，但我找不到任何符合我需求的插件。

幻灯片本身有效，我遇到的问题是动画。当你多次点击下一个按钮时，一切都搞砸了..

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

来源： http://www.alphadesigns.nl/ADtest/JQ/js/portfolio.js

预览： http://www.alphadesigns.nl/ADtest/JQ/

任何帮助表示赞赏！

PS。幻灯片本身并没有完成一个长镜头，＆＃34;巨大的图像＆＃34;将更改为较小的缩略图等但我首先希望动画正常工作。

Answer 1

通过查看您的脚本，您可能会遇到竞争状态。您正在以比您想象的更快的速度删除和添加类，从而创建一个条件，在您只选择一个项时选择多个项目。

例如：

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”类的选择器，以确保您只选择一个元素。

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

创建Jquery幻灯片动画

1 个答案: