Изменение классов на таймере Jquery - PullRequest
Новая
       22

Изменение классов на таймере Jquery

0 голосов
/ 12 октября 2009

Я создаю графический баннер, в котором есть ссылки, которые изменяют текст и изображение. Что мне нужно сделать, так это чтобы каждые 5 секунд вращаться по 5 изображениям, но при наведении мыши это приостановило вращение и привело бы вас к изображению, которое выбрал пользователь. Мой код наведения мыши: 

$("#main_nav li").mouseover( function() {
    $(".navigation_main, .main_info").each (function() {
        $(this).removeClass("on").addClass("off");
                                    });
    $("#"+$(this).attr("id")).removeClass("off").addClass("on");
    $("#"+$(this).attr("id")+"_images").removeClass("off").addClass("on");
    $("#"+$(this).attr("id")+"_text").removeClass("off").addClass("on");
    $("#"+$(this).attr("id")+"_a").removeClass("off").addClass("on");
                             });

Любая помощь в том, чтобы заставить это вращаться, была бы велика.

Большое спасибо

1 Ответ

1 голос
/ 12 октября 2009

Вот как это делает плагин цикла для jQuery:

Пример: http://malsup.com/jquery/cycle/pagerHover.html

если установлена ​​опция паузы, то при наведении курсора увеличивается переменная с именем cyclePause, в результате чего слайд-шоу не вращается: 

if (opts.pause)
    $cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});

Позже проверяется пауза цикла. Если это так, то продвижения нет. 

case 'pause':
        cont.cyclePause = 1;
        return false;
    case 'resume':
        cont.cyclePause = 0;
        if (arg2 === true) { // resume now!
            options = $(cont).data('cycle.opts');
            if (!options) {
                log('options not found, can not resume');
                return false;
            }
            if (cont.cycleTimeout) {
                clearTimeout(cont.cycleTimeout);
                cont.cycleTimeout = 0;
            }
            go(options.elements, options, 1, 1);
        }
        return false;
...