javascript - jQuery 在悬停时打开 div；自动滚动

Question

我有一个 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 秒，然后是第二个，然后是第三个...

Here is the the live site ，因为我还没有真正正确地描述它。

Answer 1

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

这是它的代码。

$(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();

});