Question

之前没有看过这个希望有人轻松解决，我有一个3个功能面板并排，我想要的是第一个面板有一个“悬停”类添加所以我可以改变背景等然后在定时间隔上，悬停类跳转到下一个面板然后下一个面板然后回到循环开始。

另外在旁注中，您可以记住代码，以便能够添加3个以上的功能div，以便您可以拥有6个或更多等等。

Answer 1

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

编辑 解决方案已更新，允许在鼠标悬停时禁用动画，并在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 demo

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

您可以添加框！

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

jsBin demo 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/

功能面板悬停更换器效果

3 个答案:

jsBin demo

jsBin demo 2