1

私が使用しているjquery/javascriptカルーセルがありますが、スクリプトの実行が完了する前にユーザーが右または左のナビゲーションボタンを複数回クリックすると、醜いアニメーションが作成され、カルーセルの順序が乱れます。

この関数がまだ実行されている間に再度呼び出されるのを防ぐ方法はありますか (2 回目のクイック クリック)。

$(document).ready(function () {
       $('.inner-main li:first').before($('.inner-main li:last'));
});

function mainSlide(direction) {
    var item_width = 940;

    if (direction == 'left') {
        var movement = parseInt($('.inner-main').css('left')) + item_width;
    } else {
        var movement = parseInt($('.inner-main').css('left')) - item_width;
    }

    $('.inner-main').animate({ 'left': movement }, 800, function () {
        if (direction == 'left') {
            $('.inner-main li:first').before($('.inner-main li:last'));
        } else {
            $('.inner-main li:last').after($('.inner-main li:first'));
        }
        $('.inner-main').css({ 'left': '-940px' });
    });
}
4

3 に答える 3

0 
var flag = false; 
function mainSlide(direction) {
if(!flag)
{
flag = true;
    var item_width = 940;

    if (direction == 'left') {
        var movement = parseInt($('.inner-main').css('left')) + item_width;
    } else {
        var movement = parseInt($('.inner-main').css('left')) - item_width;
    }

    $('.inner-main').animate({ 'left': movement }, 800, function () {
        if (direction == 'left') {
            $('.inner-main li:first').before($('.inner-main li:last'));
        } else {
            $('.inner-main li:last').after($('.inner-main li:first'));
        }
        $('.inner-main').css({ 'left': '-940px' });
    });
flag = false;
}
}
于 2013-10-11T14:34:00.383 に答える
0

最終的に答えが見つかりました。アニメーションが私に夢中になるのを防ぐために、アニメーションの前に :not(:animated) を追加する必要がありました

function mainSlide(direction) {
    var item_width = 940;

    if (direction == 'left') {
        var movement = parseInt($('.inner-main').css('left')) + item_width;
    } else {
        var movement = parseInt($('.inner-main').css('left')) - item_width;
    }

    $('.inner-main:not(:animated)').animate({ 'left': movement }, 800, function () {
        if (direction == 'left') {
            $('.inner-main li:first').before($('.inner-main li:last'));
        } else {
            $('.inner-main li:last').after($('.inner-main li:first'));
        }
        $('.inner-main').css({ 'left': '-940px' });
    });
}
于 2013-10-11T18:16:03.080 に答える