1

Colegas

Gostaria que a cada vez que o usuário acessar o site, apareça uma imagem diferente. Sei como fazer com PHP, porém nesse caso gostaria de fazer com javascript. Acredito que o Math.random(), mas não conheço muito javascript. Tentei fazer dessa forma, mas não funcionou:

<script type="text/javascript">
   function aleatorio(){
     img[0] = "ciadeli.jpg";
     img[1] = "ninashoes.jpg";
     img[2] = "odonto.jpg";
     var mudar = Math.floor(Math.random()*img.length);
     document.getElementById("aleatorio").innerHTML = "<img src='portifolios/"+img[mudar]+"'>";
   }
  </script>

<div id="aleatorio" onload="aleatorio()"></div>
0

2 Respostas 2

2

A sua função quase funciona do jeito que esta, o único problema esta em como invoca ela, o evento onload só deve ser atribuído a elementos que consomem recursos externos, tipo: frames, images, e scripts. Uma div não é considerada como um elemento externo, ela e carregada como uma parte do body, então o onload não se aplica nela.

Uma alternativa seria chamar o script logo abaixo da div, auto invocando a função:

img {width: 200px;}
<div id="aleatorio"></div>
<script type="text/javascript">
  (function() {
    // Necessário declarar a variável img 
    var img = ["http://orig14.deviantart.net/45e6/f/2016/046/c/c/cc2df80f7717e34ef6373cb48f11196a-d9rv8ct.gif", "https://i.giphy.com/JJh1zuwzcJlQs.gif", "https://i.giphy.com/Jd7Y8GCSKKzlK.gif"];
    var mudar = Math.floor(Math.random() * img.length);
    document.getElementById("aleatorio").innerHTML = "<img src='" + img[mudar] + "'>";
  })();
</script>

1
  • 1
    Perfeito MarceloBoni. Obrigado!
    – user24136
    Commented 13/05/2017 às 20:33
0

É possível gerar usando uma solução adaptada de Fisher-Yates com um array de imagens:

var imglis = ["http://puu.sh/DpIbK/7c14bc67e1.jpg",
  "http://puu.sh/DpIcD/9438c374f0.jpg",
  "http://puu.sh/DpIdc/b67b518ead.jpg",
  "http://puu.sh/DpIdq/5747748430.jpg",
  "http://puu.sh/DpIdE/54a196c849.jpg",
  "http://puu.sh/DpIdS/b8b3863be2.jpg",
  "http://puu.sh/DpIe9/68de9bc09a.jpg",
  "http://puu.sh/DpIep/b76855cd03.jpg",
  "http://puu.sh/DpIeC/7d41b98b20.jpg",
  "http://puu.sh/DpIeV/207954672c.jpg",
  "http://puu.sh/DpIfp/5299a8a2f8.jpg"]; 

function imagem_aleatoria() {
  var p, n, tmp, destino = document.querySelector('#imgdest');
  var img_len = imglis.length;
  for (p = img_len; p;) {
    n = Math.random() * p-- | 0;
    tmp = imglis[n];
    imglis[n] = imglis[p];
    imglis[p] = tmp;
  }
  destino.src = imglis[0];
}

Teste: https://jsbin.com/pujivov/edit?html,js,output

Você deve fazer log-in para responder a esta pergunta.