Javascript 循环设置超时

我有以下代码：

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

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


});

问题是它只运行一次。我想在第二个超时之后，它会循环回到第一个超时，以此类推

如需任何澄清，请告知。

尝试以下方法：

$(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();
});

---

您可以尝试使用

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

---

您可以在JQuery中使用

setInterval

函数

以下是一个工作示例：

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

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

---

您希望使用。另一方面，由于计时不是最精确的，因此您的两个函数可能无法保持同步。感谢您能让转换不那么僵硬，还有一点动画化或浮华？@user3907211-动画化或浮华是指颜色的变化以显示任何差异，还是您有任何想要的特定动画效果？谢谢您的回复。除了一个艰难的过渡，什么都可以。没有文字颜色或任何东西只是可能的fadein或out@user3907211-添加了淡入淡出和淡出过渡。更新了我的答案和JSFIDLE示例。请检查它是否适合你。

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

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