2

我是个白痴，所以就这样吧……

问题：我正在使用幻灯片式导航系统来浏览产品。一切都很好，直到在动画完成之前多次单击下一个/上一个箭头。多次单击它会导致事物完全出错，并将 div 发送到不可逆转的水平螺旋中穿过地狱。我想知道是否有办法阻止用户多次单击下一个/上一个箭头，这样幻灯片导航就不会消失。

编码：

 var SlideWidth = 305;
    var SlideSpeed = 1000;

    $(document).ready(function () {
        // set the prev and next buttons display
        SetNavigationDisplay();
    });

    function CurrentMargin() {
        // get current margin of slider
        var currentMargin = $("#slider-wrapper").css("margin-left");

        // first page load, margin will be auto, we need to change this to 0
        if (currentMargin == "auto") {
            currentMargin = 0;
        }

        // return the current margin to the function as an integer
        return parseInt(currentMargin);
    }

    function SetNavigationDisplay() {
        // get current margin
        var currentMargin = CurrentMargin();

        // if current margin is at 0, then we are at the beginning, hide previous
        if (currentMargin == 0) {
            $("#PreviousButton").hide();
        }
        else {
            $("#PreviousButton").show();
        }

        // get wrapper width
        var wrapperWidth = $("#slider-wrapper").width();

        // turn current margin into postive number and calculate if we are at last slide, if so, hide next button
        if ((currentMargin * -1) == (wrapperWidth - SlideWidth)) {
            $("#NextButton").hide();
        }
        else {
            $("#NextButton").show();
        }
    }

    function NextSlide() {
        // get the current margin and subtract the slide width
        var newMargin = CurrentMargin() - SlideWidth;

        // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
        $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { SetNavigationDisplay() });

}

    function PreviousSlide() {
        // get the current margin and subtract the slide width
        var newMargin = CurrentMargin() + SlideWidth;

        // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
        $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { SetNavigationDisplay() });
    }

和导航按钮：

<a href="javascript:void(0)" onclick="PreviousSlide()" id="PreviousButton" style="padding-right:40px;"><img src="IMGS/arrow2.png"></a><a href="javascript:void(0)" onclick="NextSlide()" id="NextButton" style="padding-right:40px;"><img src="IMGS/arrow.png"></a>

任何帮助=来自我的性崇拜。

谢谢！

4

2 回答 2

1

在动画开始时和动画结束回调函数中设置一个名为animating您设置的标志。然后只需测试标志的状态以确定您是否触发下一个/上一个逻辑。truefalse

var animating = false;

// ...SNIP...

    function NextSlide() {
        if (!animating) { 
            animating = true;

            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() - SlideWidth;

            // slide the wrapper to the left to show the next panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', function () { animating = false; SetNavigationDisplay() });
        }
    }

    function PreviousSlide() {
        if (!animating) { 
            animating = true;

            // get the current margin and subtract the slide width
            var newMargin = CurrentMargin() + SlideWidth;

            // slide the wrapper to the right to show the previous panel at the set speed. Then set the nav display on completion of animation.
            $("#slider-wrapper").animate({ marginLeft: newMargin }, SlideSpeed, 'easeOutElastic', function () { animating = false; SetNavigationDisplay() });
        }
    }
于 2012-05-23T01:21:59.633 回答
0

有一个变量定义为var animationFinished = "no";，一旦完成，让它成为animationFinished = yes;。然后有条件的说法if (animationFinished == "yes")一旦点击过程完成。

最好将其设为布尔变量，以便它是bool animationFinished = false;或true

或者正确的方法是。

$("#PreviousButton").click({ 
    $("#PreviousButton").fadeOut(300);
    $("#slider-wrapper").animate({ 
         marginLeft: newMargin }, SlideSpeed, 'easeInOutElastic', 
    ), 5000, function() {
        // Animation complete.
        SetNavigationDisplay();
        $("#PreviousButton").fadeIn(300);
        };
});

一个更好的方法是使用.addClassand.removeClass函数，并为此设置条件。

jQuery 我认为没有检查每个动画是否已完成的功能。您只需要使用.animate函数具有的回调，即后续function(){ }大括号中的内容。

于 2012-05-23T01:27:50.943 回答