페이딩 이미지 루프 jQuery

Question

나는 프리랜서 포트폴리오를 작성하는 중이지만 걸림돌이났다. HTML, CSS 및 Javascript 로고의 페이드 슬라이드 쇼를 만들려고합니다. 현재 jQuery 코드는 this입니다. 첫 번째 로고가 잘 사라지지만 멈 춥니 다. 나는 잠시 동안 내 코드를보고 무엇이 잘못되었는지 알아 내려고 노력했다. window.setInterval()의 작동 방식에 대해 너무 많이 알지는 못했지만 내 마음을 넘은 생각은 1 if 문을 통과 한 후에 시작되어 다시 시작하여 shown을 0으로 설정합니다. 도움이 될만한 점이 많습니다. 지금 내 포트폴리오를 볼 수 있습니다. here.

Answer 1

해결책은 간단합니다. 변수를 함수 외부에 놓아야합니다. 그러면 변수가 전역 변수가됩니다. "슬라이드();", 당신은 함수의 한 호출로 작업을 시작

var shown = 0; 
$(document).ready(function() { 
var slide = function() { 
    window.setInterval(function() { 
     // var shown = 0; 
     shown += 1; 
     if (shown === 1) { 
      $('#html5').fadeOut(3000); 
      $('#css3').fadeIn(3000); 
     } 
     if (shown === 2) { 
      $('#css3').fadeOut(3000); 
      $('#java-script').fadeIn(3000); 
     } 
     if (shown === 3) { 
      $('#java-script').fadeOut(3000); 
      $('#html5').fadeIn(3000); 
      shown = 0; // this resets to 0 and makes you repeat all the animation 
     } 

     // This code will make a call inside a call of a functions (not recommended) 
     // slide(); 
    }, 5000); 
}; 
slide(); 
}); 

세트 간격은 코드마다 5000 밀리 초 (5 초)입니다 호출 그래서 당신은 다시 호출 할 필요는 없습니다.

Answer 2

중요한 것은 window.setInterval으로 한 번 전화해야한다는 것입니다. 코드가 구조화 된 방식으로, 반복해서 호출됩니다. 이는 의도 한 것과 다를 수 있습니다.

올바른 트랙으로 이동해야하는 테스트되지 않은 다시 쓰기가 있습니다.

$(document).ready(function() { 
    var shown = 0; 
    function slide() { 
     if (shown === 0) { 
      $('#html5').fadeOut(3000); 
      $('#css3').fadeIn(3000); 
     } 
     if (shown === 1) { 
      $('#css3').fadeOut(3000); 
      $('#java-script').fadeIn(3000); 
     } 
     if (shown === 2) { 
      $('#java-script').fadeOut(3000); 
      $('#html5').fadeIn(3000); 
     } 
     shown = (shown+1)%3; 
    } 
    slide(); 
    window.setInterval(slide, 5000); 
});