0

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

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

.stop() 和 .clearQueue() 函数都起作用，因为这会使动画在没有先完成的情况下停止。

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

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

任何帮助表示赞赏！

附言。幻灯片本身并没有通过长镜头完成，“巨大的图像”将更改为较小的缩略图等，但我首先希望动画能够正常工作。

4

1 回答 1

0

从您的脚本来看，您似乎正在陷入竞争状态。您删除和添加类的速度比您想象的要快，因此在您打算只选择一个项目时，您会选择多个项目。

例如：

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' 类的选择器，这样你就可以确保你只选择一个元素。

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

于 2012-12-26T16:38:40.037 回答