hover时jQuery open div; 自动滚动

我有一个UL列表，里面有几个链接，每个项目都链接到自己的DIV 。 当用户将鼠标hover在UL链接上时，会显示正确的DIV框。

这是我的HTML代码：

 
 
Link 1
 
Link 2
 
Link 3
 
 
 Something goes here 1 
 
 Something goes here 2 
 
 Something goes here 3  

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

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

我想知道如何让盒子每隔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(); }); 

Answer 2

试试这样：

HTML：

 
 
Link 1
 
Link 2
 
Link 3
 
 
 Something goes here 1 
 
 Something goes here 2 
 
 Something goes here 3  

我改变了的ID。

JS

 var current_box = 0; // Saves current shown box for timer var timer_break = false; // Determines if timer shows boxes or not // Function hides all boxes function hide_boxes() { $('.boxlink').hide(); } // Function shows box wit box_id and hides all other boxes function show_box(box_id) { hide_boxes(); $('#boxlink'+box_id).show(); } $(document).ready(function () { // Bind show_box to HOVER Event $('.product-link').mouseover(function () { timer_break = true; show_box($(this).attr('id')); }); // Bind hide_box to MOUSEOUT Event $('.product-link').mouseout(function () { timer_break = false; hide_boxes(); show_box(current_id); // So there is no "gap" until the timer hits again }); // Initiate Timer var show_timer = setInterval(function () { if(!timer_break) { if(current_box < 2) { current_box++; } else { current_box = 0; } show_box(current_box); } },3000); // Show first Box after loading show_box(current_box); }); 

工作JS小提琴： http ： //jsfiddle.net/8527K/

Answer 3

我的解决方案小提琴

 
 
Link 1
 
Link 2
 
Link 3
 
 
 
info 1
 
info 2
 
info 3
  

jQuery的

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

Answer 4

这是另一种解决方案，其中包含一些data-target属性，用于指示要显示/隐藏的内容。

 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的变化。

更新：您的页面有错误：

 Steps 

没有product-link类。 添加它，我的解决方案（可能还有其他的）将正常工作。

UPDATE2：

你可以替换

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

同

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

并且它可以在不改变html的情况下工作。 我已经在你的实际页面上测试了这个。