SOURCE

var interval = setInterval(func,1000)
function func() {
  $(".box ul").animate({
    marginTop: -50
  },
  "slow", function() {
    $(".box ul li").first().appendTo($(".box ul"));
    $(".box ul").css("marginTop", 0)
  });
}

$(".box").mouseover(function(){
  clearInterval(interval);//停止
  $(".box").css('overflow-y','scroll');
});
$(".box").mouseout(function(){
  interval = setInterval(func,1000);
  $(".box").css('overflow-y','hidden');
});

<div class="box">
  <ul>
    <li class="l1">
      1
    </li>
    <li class="l2">
      2
    </li>
    <li class="l3">
      3
    </li>
    <li class="l4">
      4
    </li>
    <li class="l5">
      5
    </li>
  </ul>
</div>

.box {
  margin: 0px;
  width: 200px;
  height: 200px;
  text-align: center;
  border: 2px solid #000;
  overflow: hidden;
  padding: 0px;
}

.box ul {
  margin: 0px;
  padding-inline-start: 0px !important;
}

.box ul li {
  list-style-type: none;
  width: 200px;
  height: 50px;
  line-height: 50px;
}

.l1 {
  background: skyblue;
}

.l2 {
  background: palegreen;
}

.l3 {
  background: blueviolet;
}

.l4 {
  background: tomato;
}

.l5 {
  background: orange;
}