jQuery 슬라이더 - setTimeout 크로스 브라우저 결함?

Question

좋아, 나는 두 개의 방향 버튼만으로 미리 불러 온 이미지의 다른 슬라이더를 만들려고했다. 내가 원했던 방식대로 애니메이션을 얻었고 컨트롤 아이디어는 튜토리얼에서 얻었습니다.

(자습서 : How to Make Auto-Advancing Slideshows는)

그래서, 내 요구에 autoadvance 솔루션을 적용하고 확인 작업 모두를 얻었다. 하지만 FF로 실행하려고했을 때 (8.0) 조금 문제가있었습니다. 버튼을 클릭하면 IE (8.0)에는 문제가없는 반면 (다른 브라우저에서는 테스트되지 않음) 애니메이션이 사전 설정된 3 초 시간 후에 계속되는 부분을 제외한 모든 작업이 수행됩니다.

내가 뭘 잘못하고 있니? 당신의 timeout 변수가 잘못된 범위에있는 것 같습니다, 언뜻

var traker=0; 
$(document).ready(function(){ 
    var numOfImages=4; 
    var timeOut = null; 

    (function autoAdvance(){ 
    $('#fwd').trigger('click',[true]); 
    timeOut = setTimeout(autoAdvance,3000);  
    })(); 

    function preload(imgIndex,numImages){ 
     $("#imgholder1").css('background-image','url("'+imgIndex+'.jpg")'); 
     $("#imgholder2").hide(0); 
     imgIndex < numImages ? imgIndex++ : imgIndex=1 
     $("#imgholder2").css('background-image','url("'+imgIndex+'.jpg")'); 
     traker=imgIndex; 
    } 
    preload(1,numOfImages); 

    function animate(imgIndex,numImages){ 
     $("#imgholder2").fadeIn("slow",function(){ 
      preload(imgIndex,numImages); 
     }); 
    } 

    $("#fwd").bind("click",function(e,simulated){ 
     animate(traker,numOfImages); 
     if(!simulated){ 
      clearTimeout(timeOut); 
      timeOut = setTimeout(autoAdvance,3000); 
     } 
    }); 

    $("#bwd").bind("click",function(){ 
     var temp=traker-2; 
     if(temp == 0){temp=numOfImages;} 
     if(temp == -1){temp=numOfImages-1;} 
     $("#imgholder2").css('background-image','url("'+temp+'.jpg")'); 
     animate(temp,numOfImages); 
     clearTimeout(timeOut); 
     timeOut = setTimeout(autoAdvance,3000); 
    }); 
}); 

Answer 1

수정보다는 window.setTimeout을 사용한다!

이 :

(function autoAdvance(){ 
    $('#fwd').trigger('click',[true]); 
    timeOut = setTimeout(autoAdvance,3000); 
})(); 

은 다음과 같아야합니다

function autoAdvance(){ 
    $('#fwd').trigger('click',[true]); 
    timeOut = setTimeout(autoAdvance,3000);  
} 
autoAdvance(); 

FF는 자기가 다른 기능 autoAdvance를 호출 인식하지 않았다.

Answer 2

:

HTML을 부분 :

<div id=imgholder1> 
    <div id="imgholder2"></div> 
</div> 
<div id="bwd" class="button"><</div> 
<div id="fwd" class="button">></div> 

jQuery를/자바 스크립트 여기

필요한 코드입니다 - 함수 사이에서 공유되도록 모든 것의 외부에 선언하십시오.

개인적으로, 나는 또한 가까운 그런 있습니다 예약 방법 키워드를 사용하지 않는, 그래서 사용 또한

var tmr; 

을, 당신은 단지 setTimeout