javascript - 如何在鼠标悬停时暂停滚动(how to pause scrolling on mouse over)

Question

Here i put a code to scroll image up and down automatically but i need to slow the speed and pause scrolling on mouse over .Please help me to solve my issue .

(在这里，我放置了一个代码来自动上下滚动图像，但是我需要降低速度并在鼠标悬停时暂停滚动。请帮助我解决问题。)

style tag is for style the back ground and inner image

(样式标签用于样式化背景和内部图像)

to call background image and inner image:

(调用背景图片和内部图片：)

          <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;
  }

  ask by Aishah Aishu translate from so

Answer 1

I have found something that allows you to pause it but it goes down infinitely and once it pauses it wont start going again.

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

    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)

with

(与)

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

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

for html

(对于html)