如何在5秒后自动编程下一个div

Question

我正在开发一个新的网站，我需要它在7秒后改变框架。我的想法是第一帧，在7秒后的第2帧，然后在7秒后的第3帧有按钮继续。

有人能帮我解决这个问题吗？

到目前为止，我拥有的代码是：

<header id="home">
<div id="home-slider" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active" style="background-image: url(images/slider/1.jpg)">
      <div class="caption">
        <h1 class="animated fadeInLeftBig">Bem Vindo
      </div> 
    </div> 
    <div class="item" style="background-image: url(images/slider/2.jpg)">
      <div class="caption"
        <h1 class="animated fadeInLeftBig">NÓS SOMOS </h1>
      </div>
    </div>
    <div class="item" style="background-image: url(images/slider/3.jpg)">
      <div class="caption">
        <h1 class="animated fadeInLeftBig"> <span>The Outsider Marketing Company</span></h1>
        <p class="animated fadeInRightBig">MARKETING - COMUNICAÇÃO - WEBDESIGN</p>
        <a data-scroll class="btn btn-start animated fadeInUpBig" href="#services">PROSSEGUIR</a>
      </div>
    </div>
  </div>
  <a class="left-control" href="#home-slider" data-slide="prev"><i class="fa fa-angle-left"></i></a>
  <a class="right-control" href="#home-slider" data-slide="next"><i class="fa fa-angle-right"></i></a>

  <a id="tohash" href="#services"><i class="fa fa-angle-down"></i></a>

Answer 1

我猜你想要通过jQuery来实现，你必须有规则为display: none的item类和具有display:block的active类，所以试着使用下面的代码：

$(document).ready(function(){
    var currentItem = 0,
    items       = $('.item');

    setTimeout(function(){
        items.removeClass('active');
        items[currentItem].addClass('active');
        if(currentItem == items.lenght - 1)
            currentItem = 0;
    }, 7000)

});