javascript - How to pause the image sliding onmouseover the image in JQuery

Question

To pause the image sliding onmouseover the image and also have to display the navigation buttons.

This is my code:

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