如何暫停圖像在jQuery中滑動onmouseover圖像

Question

要暫停圖像滑動onmouseover圖像並且還必須顯示導航按鈕。

這是我的代碼：

<script> 

    $("#slideshow > div:gt(0)").hide(); 

    setInterval(function() { 
     $('#slideshow > div:first') 
     .fadeOut(1000) 
     .next() 
     .fadeIn(1000) 
     .end() 
     .appendTo('#slideshow'); 
    }, 3000); 

</script> 

<style type="text/css"> 
    #slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
} 

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
} 
</style> 
<div id="slideshow"> 
    <div> 
    <a class="product_rowimage" id="den" href="javascript::void('0');" title=""> 
    <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg"> 
    </a> 
    </div> 
    <div> 
    <a class="product_rowimage" id="den" href="javascript::void('0');" title=""> 
    <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg"> 
    </a> 
    </div> 
</div> 

Answer 1

編輯腳本

$("#slideshow > div:gt(0)").hide(); 
    var intervalID = null; 
    function StartSlide() { 
     intervalID = setInterval(function() { 
      $('#slideshow > div:first') 
     .fadeOut(200) 
     .next() 
     .fadeIn(200) 
     .end() 
     .appendTo('#slideshow'); 
     }, 500); 
    } 
    StartSlide(); 
    $("#slideshow").hover(function() { 
     if (intervalID != null) { 
      clearInterval(intervalID); 
      intervalID = null; 
     } 
     // Add the showing of Nav Buttons here 
     // Had no example of your nav buttons 
    }, function() { 
     if (intervalID == null) { 
      StartSlide() 
     } 
    })