잠시 후 javascript 슬라이드 쇼가 오작동합니다.

Question

이 간단한 코드를 작성하여 내 웹 사이트의 기본 슬라이드 쇼를 만들었습니다. 이 코드는 잠시 동안 제대로 작동하지만 오작동하기 시작한 후에 이미지가 적절하게로드되지 않고 동일한 이미지가 갑자기 튀어 나오고 사라지고 천천히 다시 나타납니다. 는 그래도 뭔가는의 setTimeout 타이밍 가지 잘못 될 수 있지만, 나는 그것을 가진을 많이 해본 적이 그것은 내 문제가 해결되지 않은 :

var x = 1; 
    function F() { 
     $('#Left').html("<img src='Images/" + x + ".jpg' />").fadeOut(0).fadeIn(1000).delay(5000).fadeOut(1000); 
     if (x < 3) { x++;} 
     else { x = 1; } 
     setTimeout("F()", 7000); 
    } 

내 질문은 간단한 코드와 방법에있어 문제점이 될 수 무엇인가 문제를 해결하거나 개선 할 수 있습니까?

Answer 1

페이드 작업에 문제가있을 수 있습니다. 정확히 7 초가 걸리지는 않지만 타임 아웃은 7 초로 예정되어 있으므로 시간이 지남에 따라 두 줄은 제대로 정렬되지 않습니다. 완료 기능으로 마지막 페이드가 끝나면 다음 애니메이션을 시작하여 누적 오류없이 완벽하게 정렬 할 수 있습니다.

var x = 1; 
    function F() { 
     $('#Left').html("<img src='Images/" + x + ".jpg' />") 
      .fadeOut(0) 
      .fadeIn(1000) 
      .delay(5000) 
      .fadeOut(1000, F); 
     if (x < 3) { x++;} 
     else { x = 1; } 
    }