4

現在、Flexslider プラグイン (最近 Woo Themes が買収) を利用するプロジェクトに取り組んでいます。このページには複数のポップアップがあり、ポップアップがアクティブなときにスライダーを一時停止し、ポップアップが閉じたときに再開するようにします。一時停止は最初のラウンドでのみ機能し、スライダーの再開は機能しません。以下は、スライダーに使用しているコードです。「終了」呼び出しを除くすべての使用可能な呼び出しで「開始」機能を切り替えようとしました。

$w('#slider-frame').flexslider({
        アニメーション: 'フェード',
        方向ナビ: false,
        スライドショー速度: 4000,
        controlNav: 真、
        pauseOnHover: 真、
        manualControls: '#indicator-dots li',
        開始：関数（スライダー）{

            $w('.roi-click').click(関数(){
                Slider.trigger('mouseenter');
            });

            $w('div#ovrly, a#close').click(関数(){
                Slider.trigger('mouseleave');
            });

        }
    });

ページへのリンクはhttp://www.whitehardt.com/sandbox/whitehardt-v3です。

これに関する任意の助けをいただければ幸いです。

4

3 に答える 3

4

編集済み

ここで何が起こっているのか理解できたと思います。問題は、競合するイベントが進行していることです。

  1. Flexslider はsetInterval、インターバル ID を実行して内部状態変数 ( slider.animatedSlides) に格納することにより、アニメーションを開始します。
  2. スライドの上にカーソルを合わせると、Flexslider が一時停止します。でアニメーション間隔をクリアすることでこれを行いclearInterval()ます。
  3. スライド内のリンクをクリックするroiと、スライドは再び一時停止し、現在存在しない間隔がクリアされます。
  4. ページにはオーバーレイがあります。つまりmouseleave、Flexslider で a を実行すると、アニメーションが再び開始されsetInterval()、間隔 ID が保存されます。
  5. 閉じるボタンまたはオーバーレイをクリックしてオーバーレイを閉じます。その時点で を呼び出しますresume()。これは も実行しsetInterval()、保存されている間隔 ID を上書きします。これで2 つのアニメーションが実行されるので、速度が 2 倍になります。 さらに、次に を呼び出すとpause()、保存された ID が上書きされるため、最後に設定した間隔をクリアするためだけにアクセスできます。そのため、ステップ 3 から間隔をクリアすることはできなくなります。そのため、1 つの間隔のアニメーション (遅い)mouseenterと 2つの間隔mouseleave(速い) の間を行き来します。

クリックで一時停止する代わりに、マウスオーバーで一時停止し、クリックで#ovrly再開できます。これは、Flexslider のマウス終了がオーバーレイのマウスオーバーの前になるためです。

$w('#slider-frame').flexslider({
    animation: 'fade',
    directionNav: false,
    slideshowSpeed: 4000,
    controlNav: true,
    pauseOnHover: true,
    manualControls: '#indicator-dots li',
    start: function(slider){
        $w('div#ovrly').mouseover(function(){
            slider.pause();
        });
        $w('div#ovrly, a#close').click(function() {
            slider.resume();
        });
    }
});

ただし、オーバーレイを閉じたときにマウスがスライダーの上にあるかどうかによって、同様の問題が発生する可能性があります...しかし、よくわかりません。理想的には、Flexslider は、アニメーションが既に開始されている場合、新しいアニメーションを開始しません。これを flexslider.js にハッキングできます。

//FlexSlider: Automatic Slideshow Pause
slider.pause = function() {
  // Only pause if running
  if(slider.animatedSlides == null) {
      return;
  }

  clearInterval(slider.animatedSlides);

  // Clear the interval ID
  slider.animatedSlides = null;

  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('pause').addClass('play').text(slider.vars.playText);
  }
}

//FlexSlider: Automatic Slideshow Start/Resume
slider.resume = function() {
  // Only resume if paused
  if(slider.animatedSlides != null) {
      return;
  }
  slider.animatedSlides = setInterval(slider.animateSlides, slider.vars.slideshowSpeed);
  if (slider.vars.pausePlay) {
    slider.pausePlay.removeClass('play').addClass('pause').text(slider.vars.pauseText);
  }
}

start:パラメータ関数でこれらの関数をオーバーロードできます。

この変更により、速度が速くなり、一時停止できなくなるという問題が解決されます。オーバーレイがポップアップしたときにスライダーが再開するという問題が引き続き発生します。mouseoverこれは、前述のソリューションで解決できます。

ここに解決策を示すフィドルがありmouseoverます: http://jsfiddle.net/jtbowden/TWN5t/

より良いコードですが、2 番目のハックは必要ないように見えます。

于 2012-03-07T21:00:57.410 に答える
1

@Jeff B、JSの修正に感謝します。Flexslider の 2.x ブランチでは動作しないため、1.x 専用だと思います。

2.x の場合は、nvartolomei によって修正が提出されています: https://github.com/woothemes/FlexSlider/pull/322

于 2012-09-11T12:16:11.170 に答える