jQuery悬停时打开div；自动滚动 [英] jQuery open div on hover; automatic scroll through

问题描述

我有一个UL列表，其中有几个链接，并且每个项目都链接到其自己的DIV.当用户将鼠标悬停在UL链接上时，将显示正确的DIV框.

I have an UL list with several links in it, and each item is linked to its own DIV. When the user hovers over UL link, proper DIV box is shown.

这是我的HTML代码:

Here is my HTML code:

<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专家):

and the JavaScript that makes it work (not a JavaScript expert, sorry):

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

我想知道如何使这些框每3到4秒自动滚动一次.因此，例如，首先打开DIV 3秒钟，然后打开第二个，然后打开第三个...

I was wondering how can I make the boxes to be scrolled through automatically every 3 to 4 seconds. So for example, first DIV is opened for 3 seconds, then the second, then the third...

这是实时网站，因为我还没有真正描述它正确地.

Here is the the live site, since I haven't really described it properly.

推荐答案

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

Your description wasn't very clear to me, but this is how I interpereted it after viewing your website: Cycle through the links to show the nice images. This will happen automatically. BUT. If user wants to navigate, the cycle should stop

这是代码.

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

});

这篇关于jQuery悬停时打开div；自动滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！