0

Estou desenvolvendo uma página e preciso exibir alguns textos e imagens de forma aleatória numa determinada parte da página.

Eu encontrei aqui no fórum (Exibir texto aleatoriamente) um código que quase faz o que eu preciso.

Segue o código:

$(document.body).ready(function(){
    textos = ['Texto exemplo', 'Texto 2', 'Aleatório', 'Exemplo para o usuário', 'Texto 5'];
    $('#textos').text(textos[0]);
    setInterval(function() {
        var indexTexto = Math.floor(Math.random() * textos.length); //Pegará um número aleatório entre 0 e a quantidade de textos;
        $('#textos').text(textos[indexTexto]); //Definirá o texto de acordo com o índice sorteado
    },
    1000); //1 segundo
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
<div id="textos"></div>

Mas eu preciso que ao invés de exibir os textos que estão dentro do código, exiba algumas Divs chamando-as por suas respectivas IDs, que têm textos e imagens.

Tenho conhecimento básico em HTML e nenhum conhecimento em Javascript.

Se alguém puder me ajudar, ficarei grato.

1 Resposta 1

1

Primeiro posicione as divs no lugar onde quer que o conteúdo seja mostrado mas com a style="display:none;"

<div id="div-1" style="display:none;">image</div>
<div id="div-2" style="display:none;">texto</div>
<div id="div-3" style="display:none;">image</div>
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
  //O numero máximo é excluído getRandomInt(0,100) pode mostrar de 0 até 99
}

$(document.body).ready(function(){
    var id_das_divs = ['div-1','div-2','div-3'];

    setInterval(function() {
      var indice_rand = getRandomInt( 0, id_das_divs.length );
      var div_para_mostrar = id_das_divs[indice_rand];

      // a lista de divs tem 3 items mas o índice começa no zero
      // id_das_divs[0] = div-1
      // id_das_divs[1] = div-2
      // id_das_divs[2] = div-3

      // Ah melhor esconder os divs antigos antes
      id_das_divs.forEach(function(item_da_lista) {
        $("#"+ item_da_lista ).hide();
      });
      // mostrar a nova imagem/texto
      $("#"+ div_para_mostrar ).show();
    },
    1000); //1 segundo
});
2
  • Seu código funcionou perfeitamente. Exatamente como eu preciso. Colocando o seu código em prática, me surgiu questão. Caso uma pessoa esteja lendo algo que está dentro da Div e no meio da leitura, puf, o texto muda ou aparece uma imagem, a pessoa ficará no mínimo insatisfeita com a situação. Minha dúvida é: Tem como adicionar um botão com a opção retroceder e um outro botão com a opção pausar? Mas olha, de qualquer forma, você me ajudou imensamente. Seu código vai me ajudar muito. Muito obrigado! Abraço.
    – michelbtos
    Commented 5/03/2019 às 3:17
  • Outra situação que ocorreu, foi que eu mudei o tempo de exibição para 1 minuto. Mas o problema é que quando carrega ou recarrega a página, leva um minuto para ser exibida a primeira Div. Tem como mudar isso? Obrigado.
    – michelbtos
    Commented 5/03/2019 às 20:35

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .