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. 当点击不同的按钮时，这将跟踪元素。

而不是附加 another 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 回答