javascript - 如何在鼠标悬停时暂停滚动

Question

这里我放置了一个代码来自动上下滚动图像，但我需要减慢速度并在鼠标悬停时暂停滚动。请帮助我解决我的问题。 style标签用于设置背景和内部图像的样式

调用背景图片和内部图片:

          <img src="images/webdesign/pixo-mob.png" alt="">  
    </figure>
  </div>
</div>
</div>
<script>
  $(function () {
    var $image = $('#image-autoscroll').children('img');
    function animate_img() {
      if ($image.css('top') == '0px') {
      $image.animate({top: -($image.height()-485)+"px"}, $image.height()*5,     function () {
        animate_img();
      });
     } else {
       $image.animate({top: '0px'}, $image.height()*5, function () {
         animate_img();
       });
     }
   }
   animate_img();
  });
</script>


<style>
  .phone-style .phone {
    background: url(../images/webdesign/phone.png) no-repeat;
    max-width: 283px;
    width: 100%;
    background-size: 100%;
    height: 471px;
    margin: 0 auto;
    overflow: hidden;
    padding: 84px 41px 99px 32px;
  }

  .phone-style .macbook, .phone-style .phone, .phone-style .tablt {
    z-index: 9999;
    cursor: not-allowed;
    box-sizing: border-box;
  }

  .phone-style .device {
    width: 100%;
    height: 100%;
  }

  .phone-style #filter, .phone-style .device {
    display: block;
    overflow: hidden;
  }

  #image-autoscroll > img {
    position : relative;
  }

Answer 1

我发现了一些东西，可以让你暂停它，但它会无限下降，一旦暂停，它就不会再开始了。

    var yPos = 0;
var pic = $('#i');
var m = setInterval(function() {
    $('#i').css({
        'position': 'absolute',
        'top': yPos
    })
    yPos++;
  pic.mouseover(function() {
    clearInterval(m)
})
pic.mouseleave(function() {
    setInterval($('#i').css({
        'position': 'absolute',
        'top': yPos
    })
    yPos+=0.5;, 75)
})
}, 75)

与

<p id="i">Hello Weaver!</p>

<!-- End your code here -->
</body>

对于 html