javascript - 在部分引导中随机化图像

我在某节中有一张图片，但是想将图片随机化，每隔4秒钟更改一次图片，已经尝试过滑行，但是没有人可以通过任何简单的方法在此部分中将其随机化，您可以不能填满整个页面，因此应该有所响应。

code here

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

最佳答案

这样的事情应该做到：

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