javascript - 如何在jQuery中创建无限循环

我正在创建一个带有“下一步按钮”的滑块。我想使滑块无限大。现在，当我单击“下一步按钮”时，它将显示下一张幻灯片，但是当我到达最后一张幻灯片并单击“下一步按钮”时，幻灯片将不会返回其第一张图像。

这是我所做的：

(function($) {
  $.fn.learnAnimals = function(options) {
    var $animals = this;
    /* Next Button */
    $animals.find('.next').each(function() {
        $(this).click(function() {
          var index = $('.next').index(this);
          $animals.find(".curr_animal").fadeOut('slow');
          $animals.find(".curr_animal").removeClass('curr_animal');
          if (index <= 6) {
            $animals.find(".info-wrapper").eq(index + 1).fadeIn('slow');
            $animals.find(".info-wrapper").eq(index + 1).addClass('curr_animal');

            /* Hide inactive divs */
            $animals.find("div.info-wrapper").not(".curr_animal").hide();
            return $animals;
          };
        })(jQuery);
        if (index == 0) {
          $animals.find(".info-wrapper").eq(index).addClass('curr_animal');
        }
      }


    });
});

/* Hide inactive divs */
$animals.find("div.info-wrapper").not(".curr_animal").hide();
return $animals;
};
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="learn_animal">
  <div class="row option-wrapper info-wrapper  curr_animal">


    <div class="col-lg-6 clearfix">
      <div class="aging-img">
        <img class="border-image" src="http://mydevwebsites.info/okczookiOS k2/wp-content/themes/okczoo/images/research/gorilla/100_1793.JPG" width="818" height="534" alt="Aging" />
        <div class="next-btn clearfix">
          <a href="#" class="next">Next</a>
        </div>
      </div>

    </div>
  </div>

  <div class="row option-wrapper info-wrapper">


    <div class="col-lg-6 clearfix">
      <div class="aging-img">
        <img class="border-image" src="http://mydevwebsites.info/okczookiOS k2/wp-content/themes/okczoo/images/research/gorilla/DSC_0002.JPG" width="818" height="534" alt="Aging" />
        <div class="next-btn clearfix">
          <a href="#" class="next">Next</a>
        </div>
      </div>

    </div>
  </div>

  <div class="row option-wrapper info-wrapper">


    <div class="col-lg-6 clearfix">
      <div class="aging-img">
        <img class="border-image" src="http://mydevwebsites.info/okczookiOS k2/wp-content/themes/okczoo/images/research/gorilla/DSC_0014.JPG" width="818" height="534" alt="Aging" />
        <div class="next-btn clearfix">
          <a href="#" class="next">Next</a>
        </div>
      </div>

    </div>
  </div>

  <div class="row option-wrapper info-wrapper">


    <div class="col-lg-6 clearfix">
      <div class="aging-img">
        <img class="border-image" src="http://mydevwebsites.info/okczookiOS k2/wp-content/themes/okczoo/images/research/gorilla/DSC_0016.JPG" width="818" height="534" alt="Aging" />
        <div class="next-btn clearfix">
          <a href="#" class="next">Next</a>
        </div>
      </div>

    </div>
  </div>


  <div class="row option-wrapper info-wrapper">


    <div class="col-lg-6 clearfix">
      <div class="aging-img">
        <img class="border-image" src="http://mydevwebsites.info/okczookiOS k2/wp-content/themes/okczoo/images/research/gorilla/DSC_0019.JPG" width="818" height="534" alt="Aging" />
        <div class="next-btn clearfix">
          <a href="#" class="next">Next</a>
        </div>
      </div>

    </div>
  </div>

  <div class="row option-wrapper info-wrapper">


    <div class="col-lg-6 clearfix">
      <div class="aging-img">
        <img class="border-image" src="http://mydevwebsites.info/okczookiOS k2/wp-content/themes/okczoo/images/research/gorilla/DSC_0021.JPG" width="818" height="534" alt="Aging" />
        <div class="next-btn clearfix">
          <a href="#" class="next">Next</a>
        </div>
      </div>

    </div>
  </div>

</div>

JSFiddle http://jsfiddle.net/xpp4k4tL/

最佳答案

当我到达最后一张幻灯片并单击“下一步”按钮时，幻灯片
  不会回到第一张图片


尝试在0-4之间管理索引，因为您发布的html中有5个.row：

$animals.find('.next').on('click', function(){
    var index = $('.next').index(this);
    $animals.find(".curr_animal").fadeOut('slow').removeClass('curr_animal');
    index = (index + 1) % 5;
    $animals.find(".info-wrapper").eq(index).fadeIn('slow').addClass('curr_animal');
});

编辑：

删除了硬编码的最大索引：

index = (index + 1) % $('.next').length;

关于javascript - 如何在jQuery中创建无限循环，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29787515/