Question

我开发了这个＆＃34;滑块＆＃34;在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

使用setInterval()功能：

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

我需要停止使用：

clearInterval(intrvl);

Answer 2

您可以使用window.setInterval() javascript方法每隔5秒拨打montarSlider()。例如：

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

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

编辑：由于您还需要使用active类旋转元素，因此您可以先调用slide()函数来激活下一个元素，然后再调用{ {1}}功能。然后，不将间隔设置为montarSlider()函数，而是将其设置为montarSlider()函数。例如：

slide()

如何设置这个＆＃34;滑块＆＃34;每5秒换一次

2 个答案: