Как создать индикатор выполнения с автовоспроизведением, паузой при наведении курсора и перезагрузкой после нажатия стрелки? - PullRequest
Новая
       10

Как создать индикатор выполнения с автовоспроизведением, паузой при наведении курсора и перезагрузкой после нажатия стрелки?

0 голосов
/ 27 августа 2018

Я хотел бы создать индикатор прогресса на моем слайдере, используя jQuery.Индикатор выполнения должен иметь 3 функции:
(1) Он должен запускаться автоматически и запускаться каждый раз, когда появляется новый слайд (автозапуск слайдера установлен на 8000 мс)
(2) Он должен останавливаться на слайдепри наведении мыши и запуске при наведении мыши
(3) Он должен останавливать текущую анимацию и запускаться при каждом нажатии любой из стрелок
Я пытался добиться этого с помощью зацикленной функции, вот мой код: 

jQuery(document).ready(function(){   
 var $s_bar = jQuery('.progress_bar_1')
    ,$s_arrows = jQuery('.bannerControls div')
    ,$s_slider = jQuery('.parallax_mouseinteraction');

   $s_arrows.click(function () {
   jQuery(this).data('clicked', true);
 });

 function progressBar(){
    $s_bar.css('width','0');
    if(!jQuery($s_arrows).data('clicked')){
        $s_bar.animate({"width":"100%"},8000,function(){
        progressBar();
        });
        $s_slider.mouseover(function(){
            jQuery.queue($s_bar[0], "fx", []);
            $s_bar.stop();
        });
        $s_slider.mouseout(function(){
            $s_bar.delay(800).animate({"width":"100%"},8000,function(){
            progressBar();
            });
        });
    } else{
        $s_bar.finish();
        progressBar();
    }
 }
 progressBar();
}

Обратите внимание, что я должен сделать это в Wordpress, следовательно, jQuery вместо знака $.Это также не слайдер, написанный мной, это плагин Uber Slider, и я только пытаюсь «прикрепить» к нему индикатор выполнения.В любом случае, после применения приведенного выше кода, единственной рабочей частью является ширина: 100% анимации.Я только новичок, поэтому у меня возникают трудности с выявлением ошибок.Я даже не знаю, с чего начать исправление этого кода, поэтому любая помощь будет очень признательна.
Заранее благодарю за помощь!

...