Question

我有以下代码：

$(function(){
  setTimeout(function(){
    $('.testimonial1').css("display", "none");
    $('.testimonial2').css("display","block");
} ,3000);

setTimeout(function(){
  $('.testimonial2').css('display', 'none');
  $('.testimonial3').css('display', 'block');
}, 6000);


});

问题是它只运行一次。我希望在第二次超时后，它会循环回到第一次超时，依此类推。

如有任何澄清，请提出建议。

Answer 1

试试这个：

$(function() {
  function func1() {
    setTimeout(function(){
      $('.testimonial1').css("display", "none");
      $('.testimonial2').css("display","block");
      func2();
    } ,3000);
  }

  function func2() {
    setTimeout(function(){
      $('.testimonial2').css('display', 'none');
      $('.testimonial3').css('display', 'block');
      func1();
    }, 6000);
  }

  func1();
});

Answer 2

您可以在JQuery中使用setInterval函数。

以下是一个工作示例：JSFiddle setInterval

编辑1： 使用fadeIn / fadeOut效果更新了JSFiddle链接，并添加了以下代码：

的Javascript

var refreshId = setInterval(function () {
    setTimeout(function () {
        $('#t1').fadeOut("slow", function () {
            $('.testimonial1').css("display", "none");
        });
        $('#t2').fadeIn("slow", function () {
            $('.testimonial2').css("display", "block");
        });
    }, 3000);

    setTimeout(function () {
        $('#t2').fadeOut("slow", function () {
            $('.testimonial2').css("display", "none");
        });
        $('#t3').fadeIn("slow", function () {
            $('.testimonial3').css("display", "block");
        });
    }, 6000);

}, 6000);

HTML

<div id="t1" class="testimonial1">Testimonial 1</div>
<div id="t2" class="testimonial2">Testimonial 2</div>
<div id="t3" class="testimonial3">Testimonial 3</div>

CSS

.testimonial1 {
    display : block;
}
.testimonial2 {
    display : block;
}
.testimonial3 {
    display : block;
}

Answer 3

您可以尝试使用setInterval

进行循环播放

 function play() {
         setTimeout(function(){
        $('.testimonial1').css("display", "none");
        $('.testimonial2').css("display","block");
    } ,3000);



    setTimeout(function(){
      $('.testimonial2').css('display', 'none');
      $('.testimonial3').css('display', 'block');
    }, 6000);
                  }


    setInterval( play , 6000);

循环遍历setTimeout

3 个答案: