나는 프리랜서 포트폴리오를 작성하는 중이지만 걸림돌이났다. HTML, CSS 및 Javascript 로고의 페이드 슬라이드 쇼를 만들려고합니다. 현재 jQuery 코드는 this입니다. 첫 번째 로고가 잘 사라지지만 멈 춥니 다. 나는 잠시 동안 내 코드를보고 무엇이 잘못되었는지 알아 내려고 노력했다. window.setInterval()
의 작동 방식에 대해 너무 많이 알지는 못했지만 내 마음을 넘은 생각은 1 if 문을 통과 한 후에 시작되어 다시 시작하여 shown
을 0으로 설정합니다. 도움이 될만한 점이 많습니다. 지금 내 포트폴리오를 볼 수 있습니다. here.페이딩 이미지 루프 jQuery
0
A
답변
0
해결책은 간단합니다. 변수를 함수 외부에 놓아야합니다. 그러면 변수가 전역 변수가됩니다. "슬라이드();", 당신은 함수의 한 호출로 작업을 시작
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 초)입니다 호출 그래서 당신은 다시 호출 할 필요는 없습니다.
0
중요한 것은 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);
});
관련 문제
- 1. jquery 페이딩 배경 이미지
- 2. jQuery 페이지 배경 페이딩
- 3. 제출 단추 입력시 jQuery 배경 이미지 페이딩
- 4. javascript/jquery : 이미지 페이딩 스크립트를 찾고
- 5. 이미지 뷰에서 이미지 테두리 페이딩
- 6. jquery 페이딩 갤러리
- 7. 리소스에서 아이폰의 이미지 페이딩
- 8. 페이딩 이미지 - 인수 오류
- 9. iphone 페이딩 이미지
- 10. 페이딩 이미지 - 스윙
- 11. 다른 이미지로 이미지 페이딩
- 12. 액션 스크립트로 이미지 페이딩
- 13. jQuery 마우스 오버() 깜박임/페이딩
- 14. jQuery 페이딩 효과
- 15. jquery 페이딩 시퀀스
- 16. Jquery 페이딩 콘텐츠 점프
- 17. 클래스에서의 Jquery 페이딩
- 18. jQuery - 페이딩 img 변경
- 19. Jquery - 아코디언 페이딩
- 20. Jquery 아코디언 및 페이딩
- 21. JQuery/Javascript 페이딩 기능 작성
- 22. Jquery 이미지 갤러리 while 루프
- 23. jQuery 망막 이미지 교체 루프
- 24. jQuery 이미지 슬라이더 루프 만들기
- 25. Jquery 페이딩 드롭 다운 메뉴
- 26. 중첩 된 범위에서의 Jquery 페이딩
- 27. 사이의 jquery 페이딩 사이의 차이점
- 28. 간단한 jQuery 페이딩 시퀀스 문제
- 29. Mac에서 jQuery 텍스트 페이딩 효과
- 30. 페이딩 애니메이션