매초마다 배경 이미지 변경 jQuery javascript

Question

매초마다 배경 이미지를 변경하려고합니다. 나는 4 개의 배경 이미지를 가지고 있고 그것들을 바꿀 수있다. 그러나 매 4 턴마다 2 개의 이미지가 나타난다. 이 문제를 해결하는 방법에 대한 논리를 이해할 수 없습니다.

아래에서 현재 코드를 볼 수 있습니다. 당신이 보여와 같은 IMG을 숨기고 있기 때문에

HTML

<img class="img-1" src="one.jpg"> 
<img class="img-2" src="two.jpg"> 
<img class="img-3" src="three.jpg"> 
<img class="img-4" src="four.jpg"> 

JS

코드에서 잘

var x = 0, 
homepageImages = ["1","2","3","4"]; 
setInterval(function(){ 
    x++; 
    if(x === 4){ 
     x = 0; 
    } 
    $('.img-' + homepageImages[x]).css('display', 'block'); 
    $('.img-' + (homepageImages[x] - 1)).css('display', 'none'); 
}, 1000); 

Answer 1

그것은 아무것도

$('.img-' + homepageImages[x]).css('display', 'block'); <-- you show it 
$('.img-' + (homepageImages[x])).css('display', 'none'); <-- you hide it 

을해서는 안된다.

제 생각에 -1이 삭제되었습니다. 이 경우 포장하는 상황을 처리하는 대신 과정 0-1은 -1이 될 것이므로 추가하는 것보다 먼저 이미지를 숨기십시오.

var x = 0, 
homepageImages = ["1","2","3","4"]; 
setInterval(function(){ 
    $('.img-' + homepageImages[x]).css('display', 'none'); //hide the active one first 
    x++; 
    if(x === 4){ 
     x = 0; 
    } 
    $('.img-' + homepageImages[x]).css('display', 'block'); //show the next one 
}, 1000); 

Answer 2

은 당신의 코드는 다음과 시도 편집 : 삼중의 유형을 확인합니다 동일하기 때문에 대신 '==='의 '=='

사용; 도 이전에는 증가하지 않았습니다. 증가 자바 스크립트 배열 인덱스에서 시작하기 때문에 0 이 (가) 홈페이지 배열을 기억 한 후 것은 늘 당신이 인덱스 1되지 시작할 것이다

<img class="img-1" src="one.jpg"> 
<img class="img-2" src="two.jpg"> 
<img class="img-3" src="three.jpg"> 
<img class="img-4" src="four.jpg"> 

var x = 0; 
var homepageImages = ["1","2","3","4"]; 

setInterval(function(){ 
    /*x++;*/ 
    if(x == 4){ 
     x = 0; 
    } 


$('.img-' + homepageImages[x]).css('display', 'block'); 
    $('.img-' + (homepageImages[x] - 1)).css('display', 'none'); 
    x++; 
}, 1000);