功能面板悬停变换器效果

Question

以前从未见过这种情况，所以希望有人能轻松解决，我有一个并排的3个功能面板div，我希望第一个面板添加了一个"悬停"类，这样我就可以更改背景等，然后在一定的时间间隔内，悬停类跳到下一个面板，然后跳到下个面板，再回到循环的开始。

此外，请注意，您是否可以记住代码，以便能够添加3个以上的功能div，例如可以添加6个或更多或更少等。

Answer 1

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

编辑： 解决方案已更新，允许在mouseover上禁用动画，在mouseleave上启用动画

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

您可以在whish添加框！

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

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/