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

:hoverこのソリューションでは、CSS状態も必要ありません。

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/