1

(i) いくつかの色の遷移を作成し、(ii) スライダーのプラグイン コードの外部で動作する外部の前/次の矢印を使用するために少しハッキングしたスライダー (Liquid Slider を使用) があります。

スライダーを操作するためのトランジションと矢印が機能していますが、スライダーがまだスライド間を移動している場合でも、複数のクリックで色のトランジションが実行されるのを防ぐことはできません。

使ってみましreturn falseたe.stopImmediatePropagation()がダメでした。

前/次の矢印のコードは次のとおりです。

$('.arrows a')
        .click(function(e) {
            var link = $(this);
            oldTab = $('.liquid-nav a.active'), newTab;
            oldTab.removeClass('active').prev().animate({opacity: 0}, 1000);
            if (link.hasClass('next')) {
                if (oldTab.parent().next().length) { // Test for looping slides
                    newTab = oldTab.parent().next().find('a');
                    newTabNum = theSlider.currentTab + 1;
                } else {
                    newTab = $('.tab1').find('a');
                    newTabNum = 0;
                }
                console.log( newTabNum );
                theSlider.setCurrent( newTabNum );
            } else {
                if (oldTab.parent().prev().length) { // Test for looping slides
                    newTab = oldTab.parent().prev().find('a');
                    newTabNum = theSlider.currentTab - 1;
                } else {
                    newTab = $('.tab' + theSlider.panelCount).find('a');
                    newTabNum = theSlider.panelCount - 1;
                }
                console.log( newTabNum );
                theSlider.setCurrent( newTabNum );
            }

            newTab.addClass('active').prev().animate({opacity: 1}, 1000);
            $('.liquid-nav').animate({borderTopColor: newTab.attr('data-colour')}, 1000);
            $('.arrows a').animate({backgroundColor: newTab.attr('data-colour')}, 1000);
        });

スライダー プラグインはコールフォワードとコールバックを許可し、変数slidingが true のときに矢印が何かを実行するのを防ぐために、アニメーションの発生中に変数を設定しようとしましたが、残念ながらタイミングが正しくありませんでした-設定されたコールフォワードslidingクリックハンドラーが実行される前に true に変更しませんでした。

矢印のコードは非常に単純です。

<div class="arrows">
    <a href="javascript:;" class="prev"></a>
    <a href="javascript:;" class="next"></a>
</div>

同様の問題に関連する質問がすでにいくつかありますが、前述のように、提案された解決策を試してみましたが、あまり運がありませんでした。どんな助けでも大歓迎です:)

4

2 に答える 2

0

次の可能性をテストします: {関連する HTML コードが表示されない}

$('.arrows a')
    .click(function (e) {
    //use selector relative to your slider, by default class liquid-slide
    if ($('.liquid-slider').is(':animated')) return;
    var link = $(this);
    //... all other code here
});
于 2013-07-04T09:17:22.420 に答える