1

左または右の矢印への移動が完了するまで、スライダーが矢印のクリックを無視するようにする方法の回答またはアドバイスを探しています。

何が起こっているのかを正確に示すためのリンクがここにあります。

http://madaxedesign.co.uk/dev/index/

および以下の Jquery コード:

$(document).ready(function() {

    var nav = $('div.slider').css('overflow', 'hidden').children('ul'),
    ul = $('#container .slider ul'),
    count = $('#container .slider ul li').length,
    width = count * 854;    

    $('#container .slider ul').width(width);

function slideRight() {
        ul.animate({
            left: '0'
        }, 1000);
    }

    function moveRight() {
        $('#container .slider ul li:first').insertBefore($('#container .slider ul li:last'));           
        ul.css("left", "-854px");
    }

    function slideLeft() {
        ul.animate({
            left: '-=854'
        }, 1000, function() {
            $('#container .slider ul li:first').appendTo(ul);           
            ul.css("left", "0");
        });
    }

    var autoSlide;

    autoSlide = setInterval(function() {
        slideLeft();
    }, 3000);

    $('#container .slider_container').mouseenter(function() {
        clearInterval(autoSlide);
    }).mouseleave(function() {
        autoSlide = setInterval(function() {
            slideLeft();
        }, 3000);
    });

    $('#slider-nav').show();

    $('#slider-nav .left_arrow').click(function(slideLeft){
        event.stopPropagation();
    });

    $('#slider-nav .right_arrow').click(function() {
        moveRight();
        slideRight().delay(200);
    });
});
4

3 に答える 3

1

:animatedセレクターを使用して、アニメーションが実行されているかどうかを確認します。

$('#slider-nav .right_arrow').click(function() {
    if(ul.is(":animated")) return;
    ...
});
于 2013-02-26T14:02:11.857 に答える
1

トリックは、現在スライドしているかどうかを示す変数を保持し、それが の場合にのみスライド関数を実行することfalseです。次に、スライディング関数が実行されたら、それを にtrue設定し、コールバックに false に設定するように指示します。sliding以下のコードで変数を呼び出しました。

$(document).ready(function() {
    // Flag to test on trigger
    var sliding = false;

    var nav = $('div.slider').css('overflow', 'hidden').children('ul'),
    ul = $('#container .slider ul'),
    count = $('#container .slider ul li').length,
    width = count * 854;    

    $('#container .slider ul').width(width);

function slideRight() {
        // Stop the function if we're already sliding
        if(sliding){
            return false;
        }

        // And now we're sliding
        sliding = true;

        ul.animate({
            left: '0'
        }, 1000, function(){
            // Slide over!
            sliding = false;
        });
    }

    function moveRight() {
        $('#container .slider ul li:first').insertBefore($('#container .slider ul li:last'));
        ul.css("left", "-854px");
    }

    function slideLeft() {
        // Stop the function if we're already sliding
        if(sliding){
            return false;
        }

        // And now we're sliding
        sliding = true;
        ul.animate({
            left: '-=854'
        }, 1000, function() {
            // Slide over!
            sliding = false;

            $('#container .slider ul li:first').appendTo(ul);
            ul.css("left", "0");
        });
    }

    var autoSlide;

    autoSlide = setInterval(function() {
        slideLeft();
    }, 3000);

    $('#container .slider_container').mouseenter(function() {
        clearInterval(autoSlide);
    }).mouseleave(function() {
        autoSlide = setInterval(function() {
            slideLeft();
        }, 3000);
    });

    $('#slider-nav').show();

    $('#slider-nav .left_arrow').click(function(slideLeft){
        event.stopPropagation();
    });

    $('#slider-nav .right_arrow').click(function() {
        moveRight();
        slideRight().delay(200);
    });
});
于 2013-02-26T14:05:28.113 に答える
0

あなたの問題はslideRight()何も返さないことだと思います...

function slideRight() {
    return ul.animate({
        left: '0'
    }, 1000);
}
于 2013-02-26T14:02:40.030 に答える