jquery - 功能面板悬停变换器效果

Question

以前没见过，所以希望有人能轻松解决，我有一个并排的 3 个功能面板 div，我想要发生的是第一个面板添加了一个“悬停”类，这样我就可以更改背景等然后打开一个时间间隔，悬停类跳到下一个面板，然后是下一个面板，然后回到循环的开始。

另外在旁注中，您是否可以记住代码以便能够添加超过 3 个功能 div，以便您可以拥有例如 6 个或更多或更少等。

Answer 1

这是一个简单的实现：http: //jsfiddle.net/joplomacedo/j4Abt/

编辑： 解决方案更新以允许在鼠标悬停时禁用动画，并在鼠标离开时启用。

    var timeout,
        els = $('.box').children(),
        el = els.first().addClass('active'),
        el0 = el,

        startCycle = function () {
            function f() {
                el.removeClass('active');
                el = el.next().length ? el.next() : el0;
                el.addClass('active');
                timeout = setTimeout(f, 3000);
            }

            timeout = setTimeout(f, 3000);
        };

    els.on({
        mouseover: function (e) {
            var tg = $(e.target);
            if ( !tg.hasClass('active') ) {
                el.removeClass('active');
                el = tg.addClass('active');
            }
            clearTimeout(timeout);
        },
        mouseleave: function () {
            startCycle();
        }
    });

    startCycle();

Answer 2

jsBin 演示

var box=$('.box'), c=0;
function loop(){
   box.removeClass('active').eq(c++%box.length).addClass('active');
}loop();
setInterval(loop, 1000);

您可以随意添加框！

编辑：在悬停时停止循环并从上次悬停继续

jsBin 演示 2

var box=$('.box'), c=0, int;
function tglClass(){   
   box.removeClass('active').eq(c++%box.length).addClass('active');
}
function loop(){
   int=setInterval(tglClass,1000);
}loop();
box.on('mouseenter mouseleave',function(e){
   c=$(this).index();  
   var evt=e.type=='mouseenter' ? (tglClass())(clearInterval(int)) : loop();
});

在这个解决方案中，您甚至不需要 CSS:hover状态！

Answer 3

怎么样的东西：

function jump($container, timeout) {
    var $current = $('.active', $container);
    var $next = $current.next();

    $('.active', $container).removeClass('active');

    if ($next.length) {
        $next.addClass('active');
    } else {
        $('.panel', $container).first().addClass('active');
    }

    setTimeout(function() {
        jump($container, timeout);
    }, timeout);
}

(function($) {
    var timeout = 1000;
    $('.slider-container').each(function() {
        var $container = $(this);
        setTimeout(function() {
            jump($container, timeout);
        }, timeout);
    });
})(jQuery);​

演示：http: //jsfiddle.net/KgYDu/