如何使 JQuery 持续循环

下面是一些应该执行所需操作的示例代码。您需要更改我标记的位置以使用特定于您的用例的代码。使它工作的原因是图像存储在一个数组中，然后你更新下一个图像的索引。从头开始的关键是% 4，这使得可能的值只有 0、1、2 或 3。

编辑：我还添加了一种使用 setTimeout 做同样事情的方法，这是一种处理计时的替代方法，可以更安全，但也使计时工作略有不同，因为计时器在调用.fadeOut之后而不是之前启动。

$(function(){
  /* This is the array you should use
  var images = [
    <%= asset_path('bg-1.jpg') %>,
    <%= asset_path('bg-2.jpg') %>,
    <%= asset_path('bg-3.jpg') %>,
    <%= asset_path('bg-4.jpg') %>;
  */
  // This is just so the demo can work
  var images = ['image1', 'image2', 'image3', 'image4'];
  
  var nextImageIndex = 1;
  
  // Set first image
  $('.wrapper').text(images[0]); // Adjust this for your use case
  
  setInterval(function() {
    $('.wrapper').fadeOut(function() {
      $(this).text(images[nextImageIndex]); // Adjust this for your use case
      nextImageIndex = (nextImageIndex + 1) % 4;
    }).fadeIn();
  }, 3000);
  /*
   * Here is an example using setTimeout since it can be safer
   * than setInterval. This will not make the image update every
   * 3 seconds though, it will actually update ~3 seconds after
   * you make the call to fadeOut.
   */
  
  var nextImageIndexForTimeout = 1;
  
  function updateImage() {
    $('.wrapper2').fadeOut(function() {
      $(this).text(images[nextImageIndexForTimeout]); // Adjust this for your use case
      nextImageIndexForTimeout = (nextImageIndexForTimeout + 1) % 4;
    }).fadeIn();
    
    setTimeout(updateImage, 3000);
  }
  
  // Set first image
  $('.wrapper2').text(images[0]); // Adjust this for your use case
  
  setTimeout(updateImage, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper"></div>
<div class="wrapper2"></div>

这不是让jquery连续循环，相反，你想要的是有一个图像URL数组，并在每次计时器触发时获取"next"一个。 有几种方法可以做到这一点，但由于你已经熟悉 setTimeout，我将使用它。

var images = [img0, img1, img2, img3];  // those should be the URLs to your background images
function setNextImage(){
   var image = images.shift(); // image is now the first image in the array.
   images.push(image); // place that one back on the end of the array.
   $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url("+image+")"
    );
   setTimeout(setNextImage, 3000);
};
$(function(){ 
  setNextImage();
});