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

});

Answer 2

像这样尝试：

HTML：

<ul class="productlist">
  <li><a href="#" id="0" class="product-link">Link 1</a></li>
  <li><a href="#" id="1" class="product-link">Link 2</a></li>
  <li><a href="#" id="2" 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>

我更改了<a>s 的 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

我的解决方案 fiddle

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

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

和往常一样 - Fiddle，请注意 html 中的更改。

更新：您的页面有错误：

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

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

更新2：

你可以替换

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

有

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

它可以在不更改 html 的情况下工作。我已经在您的实际页面上对此进行了测试。