如何讓JQuery不斷循環

Question

有人可以請這個協助嗎？我顯然是一名新秀，因爲這並不難，但我無法弄清楚。這在4個背景圖像之間旋轉，我想要做的就是在第一個圖像（循環）重新開始並再次運行該函數。

真的很感謝幫助！

$(document).ready(function(){ 


$(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-1.jpg') %>)" 
    ); 
    setTimeout(function(){ 
      $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-1.jpg') %>)" 
     ).fadeOut(function(){ 
      $(this).css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-2.jpg') %>)" 
      ).fadeIn(); 
     }); 
     setTimeout(function(){ 
       $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-2.jpg') %>)" 
      ).fadeOut(function(){ 
       $(this).css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-3.jpg') %>)" 
       ).fadeIn(); 
      }); 
      setTimeout(function(){ 
        $(".wrapper").css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-3.jpg') %>)" 
       ).fadeOut(function(){ 
        $(this).css("background-image", "linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(<%= asset_path('bg-4.jpg') %>)" 
        ).fadeIn(); 
       }); 
      }, 3000); 
     }, 3000); 
    }, 3000); 


}); 

Answer 1

下面是一些示例代碼，應該做你想做的。您需要更改我標記爲使用特定於您的用例的代碼的位置。是什麼使這項工作是圖像存儲在一個數組中，然後更新下一個圖像的索引。在開始時重新開始的關鍵是% 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>

Answer 2

這不是讓jQuery的不斷循環，而不是你想要的是有圖像的URL的數組，並採取「下一個」一個每次都定時器觸發。有幾種方法可以做到這一點，但由於您已經熟悉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(); 
});