JQuery를 계속 반복하는 방법

Question

누군가 제발 도와 줄 수 있습니까? 나는이 선수가 분명히 신인 선수이기는하지만 힘들지는 않다. 이것은 네 개의 배경 이미지 사이에서 회전하며, 첫 번째 이미지 (루프)에서 다시 시작한 다음 다시 함수를 실행합니다.

정말 감사드립니다!

$(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(); 
});