Javascript 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专家）：

$（函数（）{
变量$box=$（'.boxlink'）；
$（'.productlist.product link'）.mouseover（函数（）{
$box.hide（）.filter（'#box'+this.id）.show（）；
});    
});

我想知道怎样才能使这些框每3到4秒自动滚动一次。例如，第一个

DIV

打开3秒钟，然后第二个，然后第三个

，因为我没有正确地描述它。

像这样尝试：

HTML:

这里有些东西
这里有些东西
这里有些东西

---

我更改了

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

这是代码

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

});

我的解决方案

下面是另一个解决方案，它具有一些
数据目标
属性，用于指向要显示/隐藏的内容

var $links = $('.product-link'), current_id = 0, timeout;
$links.mouseover(function(el) {
    var $this = $(this);       
    $this.addClass("hover")
    showLink($this);
    clearTimeout(timeout);
});  

$links.mouseleave(function(el) {
    var $this = $(this);
    $this.removeClass("hover");
    timeout = setTimeout(cycle, 1000);
});

function showLink($link){
    var currentLink = $($links[current_id]);
    $(currentLink.data("target")).hide();
    $($link.data("target")).show();
    current_id = $link.parent().index();
} 

function cycle(){
    if($links.filter(".hover").length == 0){
        var next_id = (current_id + 1) % $links.length;
        showLink($($links[next_id]));
        timeout = setTimeout(cycle, 1000); 
    }           
}
timeout = setTimeout(cycle, 1000);

和往常一样，注意html中的变化

更新：您的页面有一个错误：

<a href="http://www.carelle-creations.mybigcommerce.com/steps/" id="link13" class="current_link">Steps</a>

与

而且它可以在不改变html的情况下工作。我已经在您的实际页面上对此进行了测试。
由于某些原因，它无法正常工作，它会闪烁，并且不会更改UL项目。您还有其他建议吗？当它在列表中自动滚动时，它是工作的，但是当鼠标悬停在菜单项上时，页面会被扭曲。首先，页面有一些问题。例如，您正在加载两个不同版本的jquery（第68行和第294行）。尽量在
中保留尽可能多的javascript。编辑fiddle@codezombie post似乎对我有用。@tokmak下面是我的答案，它解释了为什么你的页面会被扭曲。你把href id设置为一位数。为什么？最好是按索引引用，而不是使用格式不正确的ID（不应该以数字开头）。这非常有效！如果我能再让你厌烦两件事（我知道，不酷：）。如何为动画添加某种淡入淡出效果，最重要的是，当循环自动通过LI项目时，如何在LI项目上保留悬停效果？（使用fadeIn进行游戏（并且fadeOut可以替换隐藏）
$(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();

});

<ul class="product-list">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
<ul class="product-info">
  <li>info 1</li>
  <li>info 2</li>
  <li>info 3</li>
</ul>

var jq_info = $('.product-info li').hide();
var tm = null, 
    tm_index=0, 
    info_len = jq_info.length;

function show(index){
   clearTimeout(tm);

   if (index != undefined) tm_index = index;

   if (tm_index >= info_len) tm_index = 0;

   jq_info.hide().eq(tm_index).show();
   if (++tm_index >= info_len) tm_index=0;


   tm = setTimeout(show, 3000);   
}

$('.product-list a').mouseover(function(){
    show($(this).closest('li').index());
})

show(0);

var $links = $('.product-link'), current_id = 0, timeout;
$links.mouseover(function(el) {
    var $this = $(this);       
    $this.addClass("hover")
    showLink($this);
    clearTimeout(timeout);
});  

$links.mouseleave(function(el) {
    var $this = $(this);
    $this.removeClass("hover");
    timeout = setTimeout(cycle, 1000);
});

function showLink($link){
    var currentLink = $($links[current_id]);
    $(currentLink.data("target")).hide();
    $($link.data("target")).show();
    current_id = $link.parent().index();
} 

function cycle(){
    if($links.filter(".hover").length == 0){
        var next_id = (current_id + 1) % $links.length;
        showLink($($links[next_id]));
        timeout = setTimeout(cycle, 1000); 
    }           
}
timeout = setTimeout(cycle, 1000);

<a href="http://www.carelle-creations.mybigcommerce.com/steps/" id="link13" class="current_link">Steps</a>

$(currentLink.data("target")).hide();
$($link.data("target")).show();

$("#box" + currentLink.attr("id")).hide();
$("#box" + $link.attr("id")).show();