在一个部分引导中随机化图像

时间:2016-06-01 15:33:24

标签: javascript html css twitter-bootstrap

我在一个部分中有一个图像,但是想要随机化图像,通过每4秒更换一次图像来实现它,已经尝试过滑动但是没有人有任何简单的方法让我在该部分中随机化,你无法填满整个页面,应该做出回应。

JavaDoc

    <section class="hero" id="topo">
        <section class="navigation">
            <header>
                <div class="header-content">
                    <div class="logo"><a href="#topo" title="voltar ao topo"><img href="http://2.bp.blogspot.com/-nEopPlbWvOw/UtVqhmqFQtI/AAAAAAAAAbU/EHnLVnTOsrg/w1200-h630-p-nu/rei+leao19.jpg" alt="Sítio Canuto"></a></div>
                    <div class="header-nav">
                        <nav>
                            <ul class="primary-nav">
                                <li><a href="#topo">Home</a></li>
                                <li><a href="#sobre">Sobre o Sítio</a></li>
                                <li><a href="#myCarousel">Fotos</a></li>
                                  <li><a href="#contato">Fale Conosco</a></li>
                                <li><a href="#chegar">Localização</a></li>

                            </ul>
                            <ul class="social-top">
                                <li><a href="https://www.facebook.com/recantocanuto" title="Facebook" target="_blank"><i class="fa fa-facebook"></i></a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="navicon">
                        <a class="nav-toggle" href="#"><span></span></a>
                    </div>
                </div>
            </header>
        </section>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="hero-content text-center">
                        <h1>Recanto Canuto</h1>
                        <p class="intro"> O melhor lugar para seu evento é aqui,venha nos visitar.</p> </br>
                        <marquee style="font-family: arial-bold;" slide direction="right"><span style="color: white;">www.facebook.com/recantocanuto</span></marquee>
                      </div>
                  </div>
              </div>
          </div>
    </section>

        <section class="features-extra section-padding" id="sobre">
        <div class="container">
            <div class="row">
                <div class="col-md-5">
                    <div class="feature-list wp4">
                        <h3>Sobre o Sítio</h3>
                        <p>
                        O RECANTO CANUTO oferece a você muito verde, flores, coqueiros, pinheiros, pomar, varandas e muito mais.<br>
<br>                        
                        Com aproximadamente 30.000m2 tem cerca de 20.000m2 de mata Atlântica preservada com estilo acolhedor e informal, o Recanto Canuto é ideal para a realização do seu evento. Aqui você encontra uma Casa Grande apropriada para pernoite. </br> <b>Parte Superior</b> 1 suite com closet, 2 quartos, 1 banheiro, 3 salas sendo 1 com lareira e 1 hall, 1 terraço em L com uma vista linda. </br> <b>Parte Inferior</b> 1 suite, 1 salão, garagem, varanda, cozinha com fogão a lenha, 1 churrasqueira grande coberta, mais uma churrasqueira na área da <b>PISCINA</b>, sendo uma piscina Adulto e outra Criança, vestiário, sauna, e muito mais. </br>
<br>                        
                        Além disso o Sitio está localizado na SP 214, km 48,2 conhecida como Estrada Santa Rita, a apenas 03 km do centro de Embu Guaçu, zona sul de São Paulo.<br>


                        </p>
                    </div>
                </div>
             </div>
         </div>
     <div class="sobre-img wp3"></div>
    </section>

1 个答案:

答案 0 :(得分:0)

这样的事情应该这样做:

var images = [
    'http://....png',
    'http://....png',
    'http://....png',
    'http://....png',
    ];

function changeImage(){
    document.getElementById('id-of-your-img').src = images[Math.floor(Math.random() * images.length)];
    setTimeout(changeImage, 4000);
}

changeImage();