0

停止後に最初の画像にフェードバックする画像スライドショーを作成しようとしていますが、うまくいきません。誰かが私に解決策を教えてくれますか?

コードは次のとおりです。http://codepen.io/peterschmidler/pen/hFHtJ

どうもありがとう!

PS

4

3 に答える 3

1

コード: http://codepen.io/anon/pen/zJFcj

if (context.hasClass("stopshow")) {
   next = context.find('.images img:first');  
   stopshow = true;
}else{
   next = next.length ? next : context.find('.images img:first');
}

ここでは、クラスstopshowが存在するかどうかを確認し、単純なifステートメントを使用して の割り当てを操作していますnext

次に、アニメーション コールバックで、stopshow変数が true でない場合にのみ繰り返します。

if(!stopshow) filesCrossfade(context)
于 2012-09-11T21:53:00.150 に答える
0

なぜ車輪を再発明するのですか?よく知られている jQuery サイクル スライドショー プラグインを試してください。軽量で、モバイル デバイスで動作し、実装が非常に簡単で、非常に便利なカスタマイズ オプションが多数あります。ここを参照してください。

于 2012-09-11T21:49:55.893 に答える
0
$(document).ready(function(){

  function filesCrossfade(context) {
    if (context.hasClass("stopshow")) {
      context.find('.images img.active').removeClass('active').delay(500).fadeOut(500);
      context.find('.images img:first').addClass('active').delay(500).fadeIn(500);
      return;

    }

    if (context.find('.images img').length > 1) {

      var active = context.find('.images img.active');
      var next = active.next();
      next = next.length ? next : context.find('.images img:first');
      active.removeClass('active').delay(500).fadeOut(500);
      next.addClass('active').delay(500).fadeIn(500, function() {
        filesCrossfade(context) });

    }

  }

  $(".content .slideshow").each(function(){
    $(this).find('.images img').hide();
    $(this).find('.images img').eq(0).fadeIn(500);

  });

  filesCrossfade($(".content .slideshow").eq(0));

  $('.stop').click(function(){
    $(".content .slideshow").eq(0).addClass("stopshow");
  });  

});
于 2012-09-11T22:02:58.653 に答える