Question

我正在开发一个新网站，我需要它在7秒后更改框架。我的想法是第一帧，在第2帧后7秒，然后在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

I guess you want to do through jQuery, you must have item class with rule display: none and active with display:block, so try with this code:

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

});

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

1 个答案: