jQuery 在悬停时打开 div；自动滚动浏览

我有一个UL列表中包含多个链接，每个项目都链接到自己的项目DIV。当用户将鼠标悬停在 UL 链接上时，正确DIV显示框。

这是我的 HTML 代码：

<ul class="productlist">
  <li><a href="#" id="link0" class="product-link">Link 1</a></li>
  <li><a href="#" id="link2" class="product-link">Link 2</a></li>
  <li><a href="#" id="link3" class="product-link">Link 3</a></li>
</ul>

<div class="panel-overview boxlink" id="boxlink0"> Something goes here 1 </div>
<div class="panel-overview boxlink" id="boxlink1"> Something goes here 2 </div>
<div class="panel-overview boxlink" id="boxlink2"> Something goes here 3 </div>

以及让它工作的 JavaScript（抱歉，我不是 JavaScript 专家）：

<script>
$(function() {
    var $boxes = $('.boxlink');
    $('.productlist .product-link').mouseover(function() {
        $boxes.hide().filter('#box' + this.id).show();
    });    
});
</script>

我想知道如何让这些框每 3 到 4 秒自动滚动一次。例如，首先DIV打开3秒，然后是第二秒，然后是第三秒……

这是现场直播的网站，因为我还没有真正正确地描述它。

你的描述对我来说不是很清楚，但这是我在查看你的网站后的解释： 循环浏览链接以显示漂亮的图像。这会自动发生。 但。如果用户想要导航，则循环应该停止

这是代码。

$(document).ready(function () {
  var $boxes = $('.boxlink');
  var $links = $('.product-link');
  var cycle = false;
  var cycle_step = 0;

  $('.productlist .product-link').mouseenter(function() {
    boxActivate(this.id);
    stopCycle();
  });

  $('.productlist .product-link').mouseleave(function() {
    cycle = setTimeout(function(){
        startCycle();
    }, 1000);
  });

  var boxActivate = function(id){
    $boxes.hide().filter('#box' + id).show();
  }
  // cycle - only when mouse is not over links
  var startCycle = function(){
    cycle = setInterval(function(){
        boxActivate($links.get(cycle_step).id);
        cycle_step++;
        if(cycle_step==$links.length) {
            cycle_step=0;
        }
    }, 1000);
  }
  var stopCycle = function(){
    clearInterval(cycle);
  }

  startCycle();

});