Javascript 使用jQuery在特定时间间隔显示和隐藏div

我想以特定的间隔（10秒）显示div，并显示下一个div，然后继续并重复相同的操作

**

顺序：

** 在第10秒 显示div1，隐藏其他div，
间隔5秒后 显示div 2并隐藏其他div，
间隔5秒后 显示div 3并隐藏其他div，
每10秒重复一次

---

代码如下：

---

请参阅

$（文件）。准备好了吗(
函数（）{
美元（“#投资组合”）。内部褪色({
速度：“慢”，
超时：10000，
类型：'序列'，
集装箱重量：“220px”
});
});

此处-将/edit添加到URL以播放代码

您只需要使用JavaScript函数

$（'html'）.addClass（'js'）；
$（函数（）{
var定时器=设置间隔（showDiv，5000）；
var计数器=0；
函数showDiv（）{
如果（计数器==0）{
计数器++；
返回；
}
$（‘div’、‘容器’）
.停止
.hide（）
.filter（函数（）{
返回此.id.match（'div'+计数器）；
})
.show（“fast”）；
计数器==3？计数器=0：计数器++；
}
});

沙箱
身体{
背景色：#fff；
字体：16px Helvetica，Arial；
颜色：#000；
}
.展示{
宽度：300px；
高度：200px；
边框：2倍实心#000；
}
.js.display{
显示：无；
}
使用setInterval触发Div显示的示例
第一个div将在10秒后显示

第一组
第二组
第三组
每10秒循环一次div

$(function () {

    var counter = 0,
        divs = $('#div1, #div2, #div3');

    function showDiv () {
        divs.hide() // hide all divs
            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show
            .show('fast'); // and show it

        counter++;
    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {
        showDiv(); // show next div
    }, 10 * 1000); // do this every 10 seconds    

});

下面是我想到的一个jQuery插件：

$.fn.cycle = function(timeout){
    var $all_elem = $(this)

    show_cycle_elem = function(index){
        if(index == $all_elem.length) return; //you can make it start-over, if you want
        $all_elem.hide().eq(index).fadeIn()
        setTimeout(function(){show_cycle_elem(++index)}, timeout);
    }
    show_cycle_elem(0);
}

对于要循环的所有div，您需要有一个通用的类名，如下所示：

$("div.cycleme").cycle(5000)

试试这个

      $('document').ready(function(){
         window.setTimeout('test()',time in milliseconds);
      });

      function test(){

      $('#divid').hide();

      } 

下面是对这个问题的另一种看法，使用递归，而不使用可变变量。此外，我没有使用
setInterval
，因此不需要进行清理

有这个HTML

<section id="testimonials">
    <h2>My testimonial spinner</h2>
    <div class="testimonial">
      <p>First content</p>
    </div>
    <div class="testimonial">
      <p>Second content</p>
    </div>
    <div class="testimonial">
       <p>Third content</p>
    </div>
</section>

谢谢你对这篇文章的快速回复。在您的示例中，它显示我们需要一个div容器，而在这个示例中，我们需要其他div。。但是我的div不是在一个单独的容器里。如何相应地修改代码？您有权修改HTML吗？如果是这样，我建议将div包装在容器div中，以便于上下文和选择。如果没有容器div，则需要修改代码，以仅选择有问题的div，即ID为1、2和3的div。现在我会更新我的答案，我可以把它放在一个容器div中，这样更清晰。Russ告诉我，在显示div1时，我们可以显示另一个div（名为：div_sub1）吗？是否可以恢复相同的代码？当然可以。有很多方法可以解决这个问题，您可以使用id上的属性匹配在显示div1的同时显示div_sub1，您可以将它链接到div1的可见性上，举几个例子。您好。我受不了这是我可以改变初始时间10秒吗？我有相同的案例，但我需要在开始时显示1个Div。有一种方法可以将布局更改为，显示div1，然后显示div2，同时仍然显示div1。那么当div2出现时，它会显示div1和div2？
      $('document').ready(function(){
         window.setTimeout('test()',time in milliseconds);
      });

      function test(){

      $('#divid').hide();

      } 

<section id="testimonials">
    <h2>My testimonial spinner</h2>
    <div class="testimonial">
      <p>First content</p>
    </div>
    <div class="testimonial">
      <p>Second content</p>
    </div>
    <div class="testimonial">
       <p>Third content</p>
    </div>
</section>

  const testimonials = $('#testimonials')
      .children()
      .filter('div.testimonial');

  const showTestimonial = index => {

    testimonials.hide();
    $(testimonials[index]).fadeIn();

    return index === testimonials.length
      ? showTestimonial(0)
      : setTimeout(() => { showTestimonial(index + 1); }, 10000);
   }

showTestimonial(0); // id of the first element you want to show.