슬라이드 쇼를 가리켜 일시 중지하는 방법

Question

좋아요, 슬라이드 쇼가 작동하지만 이미지를 마우스로 가리키면 마우스를 인식하는 방법을 모르겠습니다.

자바 스크립트 :

<script type="text/javascript">  
    var hovering = false; 
    $('#slideshow').hover(function() { //not sure if #slideshow is the right thing to put here 
     hovering = true; 
    }, function() { 
     hovering = false; 
     slideShow(); 
    }); 

    $(document).ready(function(){ 
     slideShow(); 
    }); 
    function slideShow() { 
     if(!hovering) { 
      var showing = $('#slideshow .show'); 
      var next = showing.next().length ? showing.next() : showing.parent().children(':first'); 
      var timer; 
      showing.fadeOut(500, function() { next.fadeIn(200).addClass('show'); }).removeClass('show'); 
      setTimeout(slideShow, 3000); 
     } 
    } 
</script> 

HTML : 그것을 위해

<div id="slideshow"> 
    <img class="show" src="../images/food/chicken_quesa.jpg"> 
    <img src="../images/food/beet_salad.jpg"> 
    <img src="../images/food/pasta_display.jpg"> 
</div> 

Answer 1

사용 mouseenter and mouseleave :

$('#slideshow').mouseenter(function() { 
    hovering = true; 
}).mouseleave(function() { 
    hovering = false; 
    slideShow(); 
}); 

읽기 문서 Mouse Enter 및 Mouse Leave

Answer 2

다음과 같이 시도하십시오 :

$(document).ready(function() { 

    var timer; 

    $("#slideshow div").hide(); 

    $("#slideshow") 
     // when mouse enters, clear the timer if it has been set 
     .mouseenter(function() { 
      if (timer) { clearInterval(timer) } 
     }) 
     // when mouse goes out, start the slideshow 
     .mouseleave(function() { 
      timer = setInterval(function() { 
       $("#slideshow > div:first") 
        .fadeOut(1000) 
        .next() 
        .fadeIn(1000) 
        .end() 
        .appendTo("#slideshow"); 
      }, 3000); 
     }) 
     // trigger mouseleave for initial slideshow starting 
     .mouseleave(); 

});​