Question

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

Onload：以默认“悬停以了解更多”状态
2秒后，循环至“产品1悬停状态”并保持2-3秒
循环至'产品2悬停状态'并保持2-3秒
循环至'产品3悬停状态'并保持2-3秒
然后从产品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规则：hover pseudoclass。此循环将一直运行，直到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);
});

Onload Jquery循环通过div：hovers？

1 个答案: