如何通過將鼠標懸停在幻燈片上暫停

Question

好的，我有幻燈片工作，但我不知道如何判斷鼠標是否懸停在圖像上。

的Javascript：

<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(); 

});​