Как установить этот "бегунок", чтобы изменить каждые 5 секунд

Question

Я разработал этот "бегунок" в JQuery

HTML:

<div class="col-md-6 pos-rel text-center"> 
    <div class="slider-meio slider1">  
     <img class="img-responsive" src="http://www.novahidraulica.com.br/imgcategoria/1/2014-09-24-11-09-0420.jpg"> 
    </div> 
</div> 
<div class="col-md-6 pos-rel text-center"> 
    <div class="slider-meio active slider2"> 
     <img class="img-responsive" src="http://www.novahidraulica.com.br/imgcategoria/1/2014-09-24-11-09-0420.jpg"> 
    </div> 
</div> 
<div class="col-md-3"> 
    <ul class="controle-slider"> 
     <li class="active-slider"><a data-target=".slider1" >LINHA FACE PLANA</a></li> 
     <li class=""><a data-target=".slider2" >LINHA COLHEDORA</a></li> 
    </ul> 
</div> 

JS:

function montaSlider() { 
      $(".slider-meio").each(function() { 
       if($(this).hasClass("active")){ 
        $(this).fadeIn(); 
       }else { 
        $(this).fadeOut(); 
       } 
      }); 
     } 
     montaSlider(); 
     $(".controle-slider li a").click(function() { 
      $(".controle-slider li a").parent().removeClass("active-slider"); 
      $(this).parent().addClass("active-slider") 
      $(".slider-meio").removeClass("active"); 
      $($(this).attr("data-target")).addClass("active") 
      montaSlider(); 
     }); 

я хочу, чтобы изменить слайд каждые 5 секунд, но я не могу подумать, как это сделать.

Может ли кто-нибудь мне помочь?

Answer 1

Вы можете использовать window.setInterval() Javascript метод для вызова ваши montarSlider() каждые 5 секунд. Пример:

var timer = window.seInterval(montarSlider, 5000); 

Я рекомендую хранить переменную, возвращенное методом setInterval(), так что вы можете позже остановить его, если это необходимо.

EDIT: Поскольку вы также должны вращать элементы с active класса, вы можете сначала сделать функцию с именем slide() для активации следующего элемента перед вызовом функции montarSlider(). Затем, вместо того чтобы установить интервал в функцию montarSlider(), вы установите его на функцию slide(). Пример:

function slide() { 
    var currentActive = $(".slider-meio.active"); 
    var nextActive; 
    currentActive.removeClass("active"); 

    if(currentActive.parent().next().children(".slider-meio").length > 0) { 
     nextActive = currentActive.parent().next().children(".slider-meio"); 
    } else { 
     nextActive = $(currentActive.parent().siblings()[0]).children(".slider-meio"); 
    } 
    nextActive.addClass("active"); 
    montaSlider(); 
} 
var timer = window.seInterval(slide, 5000); 

Answer 2

Используйте setInterval() функцию:

var intrvl = setInterval(function(){montaSlider()},5000); 

Я вам нужно остановить его использовать:

clearInterval(intrvl);