Javascript 淡出一系列div—；jquery

到目前为止，代码通过一系列

项逐渐消失

下一个箭头

将最新的div追加到列表的底部，使幻觉出现在幻灯片放映的前面

但是，当我尝试用

左箭头

镜像代码时，它会中断并完全淡出

li

---

请尝试此代码。。我使用了一个类来跟踪活动的

li

。这将在单击不同按钮时跟踪元素

而不是再次附加

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');
      });
  });

---

如果上一个

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');
      });
  });