1

我有一个 div:hover 脚本设置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/

4

1 回答 1

3

看我的例子小提琴：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');
    });

});

我在你使用 :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);
});
于 2012-04-17T07:52:54.007 回答