通过div加载Jquery循环：盘旋？

Question

我有一个div：悬停脚本设置http://jsfiddle.net/4wb5P/6/（在来自StackOverflow成员bfrohs的帮助下，谢谢！），但我希望悬停状态在页面加载时开始并循环遍历所有产品悬停状态（通过jQuery，我假设，或者在浏览器之间播放的东西）。所以我一直试图让循环状态是这样的：

1. 的Onload：开头是默认的“哈弗了解更多”状态
2. 后2秒，周期为“产品1个悬停状态”和停留2-3秒
3. 周期为“产物2悬停状态”和保持2-3秒
4. 周期为“产物3悬停状态”和保持2-3秒
5. 然后，在产物开始回1并无限期地浏览所有产品。

如果用户翻转任何悬停状态，它将停止循环并保持专注于悬停（只要指针停留在该图块上）。一旦用户移动指针，周期将从步骤1重新开始。

我假设一些Jquery会被使用，但那是它得到我的地方。任何帮助将不胜感激，或任何从插件开始的指针等将不胜感激。请参阅下面我当前的代码： http://jsfiddle.net/4wb5P/6/

Answer 1

看到我的例子小提琴：http://jsfiddle.net/bAtCS/1/

$(function() { 

    var hoverprod = $('.hover_product'), len = hoverprod.length, intv; 
    (function iterativehover(i) { 
     hoverprod.removeClass('hover').eq(i).addClass('hover'); 
     intv = setTimeout(function() { 
      iterativehover((i === len - 1)? 0 : i + 1) 
     }, 3000); 
    }(0)); 

    hoverprod.on('mouseenter', function() { 
     clearInterval(intv); 
     hoverprod.removeClass('hover'); 
    }); 

}); 

我已经插入了一些新的CSS规则无处不在，你使用：悬停伪类。该循环一直运行，直到发生mouseenter事件。

如果你想要一个初始延迟只是包装，像这样

var rotateDivs = function() { 
    var hoverprod = $('.hover_product'), len = hoverprod.length, intv; 
    (function iterativehover(i) { 
     hoverprod.removeClass('hover').eq(i).addClass('hover'); 
     intv = setTimeout(function() { 
      iterativehover((i === len - 1)? 0 : i + 1) 
     }, 3000); 
    }(0)); 

    hoverprod.on('mouseenter', function() { 
     clearInterval(intv); 
     hoverprod.removeClass('hover'); 
    }); 
}; 


$(function() { 
    setTimeout(rotateDivs, 3000); 
});