javascript - 如何在 JQuery 中暂停图像在鼠标上滑动

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