javascript - 如何将“滑块”设置为每5秒更改一次

我在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秒钟更换一次幻灯片，但我想不出该怎么做

谁能帮我？

最佳答案

您可以使用window.setInterval() javascript方法每5秒调用一次montarSlider()。例：

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

我建议您存储setInterval()方法返回的变量，以便以后可以根据需要停止它。

编辑：由于您还需要旋转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);