0

ここまでのコードは、一連の<li>項目をフェードアウトします。The next_arrow最新の div をリストの一番下に追加し、スライド ショーの先頭にあるように見せます。

ただし、 でコードをミラーリングしようとすると、コードがleft_arrow壊れて完全にフェードアウトしliます。

JSFIDDLE

 $('li:first-child').siblings().hide();


            $('.right_arrow').click(function () {
                $(this)
                    .parent('.container')
                    .find('li:first-child')
                    .fadeOut(200, function () {
                    $(this).next().fadeIn(200);
                    $(this).appendTo('ul');
                });
            });

          $('.left_arrow').click(function () {
                $(this)
                    .parent('.container')
                    .find('li:first-child')
                    .fadeOut(200, function () {
                    $(this).prev().fadeIn(200);
                    $(this).appendTo('ul');
                });
            });
4

1 に答える 1

1

このコードを試してみてください.クラスを使用してアクティブを追跡しましたli。これにより、さまざまなボタンがクリックされたときに要素が追跡されます。

また、 again を追加する代わりにli、 length プロパティを使用して正しい li を参照しているだけです。

  $('li:first-child').siblings().hide();


  $('.right_arrow').click(function () {
      // Check for the active li..
      // If length is zero.. set the first one to active
      // caching the variables
      var $active = $('li.active'),
          $this = $(this),
          $container = $this.closest('.container');
     // If active length is 0 then set active as first li
      var $li = $active.length ? $active : $('li:first-child');

      $li.fadeOut(200, function () {
         // When fadeout you need to get the next element
         // if length of next is 0 then use first 
          var $curr = $li.next('li').length ? $li.next('li') : $('li:first-child');
          // Add class to active elem and remove for others
          $curr.fadeIn(200).addClass('active');
          $curr.siblings().removeClass('active');
      });
  });

  $('.left_arrow').click(function () {
       // Check for the active li..
      // If length is zero.. set the first one to active
      var $active = $('li.active'),
          $this = $(this),
          $container = $this.closest('.container');
      var $li = $active.length ? $active : $('li:last-child');

      $li.fadeOut(200, function () {
          var $curr = $li.prev('li').length ? $li.prev('li') : $('li:last-child');
          $curr.fadeIn(200).addClass('active');
          $curr.siblings().removeClass('active');
      });
  });

フィドルをチェック

于 2013-07-29T17:46:33.843 に答える