4

私が取り組んでいるかなり標準的な Flexslider インスタンスがあります。 Flexsliderはjquery.mousewheel.jsプラグインとうまく統合されているため、マウスホイール イベントでスライドを移動できます。

ただし、Mac OSX などではスクロール効果に「intertia」が採用されているため、1 つのスライドだけを左右にスクロールすることは事実上不可能です。一般的な効果は、これらの状況でのわずかなスクロール モーションでさえ、複数のマウスホイール イベントをトリガーし、スライダーを複数の画像を左または右にスクロールすることです。明らかに、これは起こり得ません！

解決策は、 underscore.js、特に「デバウンス」機能を使用することだと思います。しかし、私は比較的 JS/jQuery の経験が浅く、実装方法がわかりません。

アンダースコアのドキュメントから：

デバウンス: _.debounce(function, wait, [immediate])

渡された関数の新しいデバウンスされたバージョンを作成して返します。これは、最後に呼び出されてから待機ミリ秒が経過するまで実行を延期します。入力が到着しなくなった後にのみ発生するはずの動作を実装するのに役立ちます。たとえば、Markdown コメントのプレビューのレンダリング、ウィンドウのサイズ変更が停止した後のレイアウトの再計算などです。

待機間隔の後縁ではなく、前縁でデバウンスが関数をトリガーするようにするには、immediate パラメーターに true を渡します。「送信」ボタンを誤ってダブルクリックして 2 回目が起動するのを防ぐような状況で役立ちます。

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

flexslider を初期化するために使用しているコードは次のとおりです。

// MOUSEWHEEL FIX:

function debounceEffect() { // apply debounce to mousewheel here

}

// Initialize FlexSlider
$(window).load(function() {     
    $('div.flexslider').flexslider({
        animation:'slide',
        controlNav:true,
        mousewheel:true,
        pauseOnHover:true,
        direction:'horizontal',
        animationSpeed:500,
        slideshowSpeed:5000,
        after:debounceEffect
    });
});

残念ながら、デバウンス機能をマウスホイール イベントに適用する方法がわかりません。可動部分をよく理解していないだけだと思います。

flexslider プラグインの関連するコードは次のとおりです。

    // MOUSEWHEEL:
    if (vars.mousewheel) {
      slider.bind('mousewheel', function(event, delta, deltaX, deltaY) {
        event.preventDefault();
        var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
        slider.flexAnimate(target, vars.pauseOnAction);
      });
    }

重要な場合は、これを編集してマウスホイール プラグイン コードの一部を含めることもできます。または、githubで確認することもできます。

これについて何か助けていただければ幸いです！

4

2 に答える 2

1

主な問題は、後効果としてデバウンスを適用できないこと、または少なくとも方法がわからないことだと思います。作品がどのように機能するかについて話しましょう。

を呼び出すと$('div.flexslider').flexslider({ .. }、jQuery はdiv.flexslider(いつものように) のようなすべての要素を検索し、それに flexslider を追加します。flexslider は、バインド イベントの設定など、スライダーを作成するためのすべての機構を追加します。デバウンスする必要があるのは、実際のバインド イベントそのものです。

関連する flexslider バインド コードを見つけることで、かなり近づいたようです。あなたが理想的に望むのはこれだと思います：

if (vars.mousewheel) {
  slider.bind('mouse wheel', _.debounce(function(…) {
   // usual flex slider code.
  }), 300);
}

flexslider コードを直接編集せずに、このデバウンスを実際に挿入する方法がわかりません。

マウスホイールイベントにグローバルに影響を与えたい場合は、おそらくマウスホイールプラグイン自体をデバウンスすることができます（そうかもしれません）。ハンドラーをデバウンスでラップしてから、デバウンスハンドラーをaddEventListenerとremoveEventListenerに渡す必要があると思います。

于 2013-07-23T17:29:39.193 に答える
1

この問題はまだ存在しているようです。

このデバウンスプラグインを使用して flexslider.js を変更すると、いくつかの良い結果が得られたので、次のようにします。

slider.bind('mousewheel', $.debounce( 100, true, function(event, delta, deltaX, deltaY){
     event.preventDefault();
     var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');

    slider.flexAnimate(target, slider.vars.pauseOnAction);
}));
于 2014-11-26T13:26:59.407 に答える