悬停时jQuery open 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秒,然后是第二个,然后是第三个......

这是现场网站,因为我还没有真正描述它.

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

});