如何设置此“滑块”每5秒更改一次

Question

I developed this "slider" in 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();
        });

i want to change the slide every 5 seconds, but i cant think of how to do it

can anyone help me?

Answer 1

Use the setInterval() function:

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

I you need to stop it use:

clearInterval(intrvl);

Answer 2

You can use the window.setInterval() javascript method to call your montarSlider() every 5 seconds. Example:

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

I recommend you to store the variable returned by the setInterval() method so you can later stop it if necessary.

EDIT: Since you also need to rotate the elements with the active class, you can first make a function called slide() to activate the next element before calling the montarSlider() function. Then, instead of set the interval to the montarSlider() function, you set it to the slide() function. Example:

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