-3

Eu queria que o meu texto mudasse a cada 10 segundos, tipo isso:

Eu queria que um texto aparecesse neste local, e depois de 10 segundos mudasse o texto automaticamente, e assim ia mudando...

6
  • 1
    Você possuí algum código que já testou? Talvez isso te ajudaria: stackoverflow.com/questions/19156590/… | 9lessons.info/2009/07/… 23/02/2015 às 17:10
  • Ainda não, só tenho o código da div mesmo e o texto entre as tags.
    – Piu
    23/02/2015 às 17:12
  • Exemplo, eu queria fazer tipo assim: Texto 1 Texo 2
    – Piu
    23/02/2015 às 17:13
  • Só que ambos mudam entre si a cada 10 segundos
    – Piu
    23/02/2015 às 17:14
  • 4
    E o que você tentou? 23/02/2015 às 17:52

3 Respostas 3

14

Eu faria assim:

(function() {
    "user strict";

    var i, j, textos, teste, target;

    textos = [
        "Bem Vindo!",
        "Fique de olho",
        "Porque",
        "Eu vou",
        "Ficar mudando",
        "Em um loop",
        "Infinito!!!"
    ];

    i = 0;
    j = textos.length;

    teste = function () {
        if (target) {//Verificar se o elemento DOM já existe na página
            target.innerHTML = textos[i];
            i++;
            if (i === j){
                i = 0;
            }

            //1000 = 1seg, 2000 = 2segs e por ai vai....
            window.setTimeout(teste, 2000);
        } else {
            //Se o elemento ainda não foi "renderizado" tenta busca-lo novamente
            target = document.getElementById("texto");

            //O timeout é mais rápido aqui para que quando o elemento estiver disponivel o script iniciei sem o delay de 2 segundos.
            window.setTimeout(teste, 100);
        }
    };

    teste();//Inicia o processo
})();
#texto {
   text-align: center;
}
<h1 id="texto"></h1>

0
6

Você pode usar a função setInterval, definição em: http://www.w3schools.com/jsref/met_win_setinterval.asp

EXEMPLO

var textos = ["1", "2", "a", "b"];
var interval = 10000;
var i = 0;

function MudaTexto(){
    //Altera o texto do elemento informado, com o conteúdo 'i' do array textos        
    $('#idDoElemento').text(textos[i]);

    //Move o pivô do array, até chegar ao final do mesmo, quando chegar ao 
    //final volta para o começo
    if(++i == textos.length) i = 0;
}

$(document).ready(function(){
    //Executa a função MudaTexto, no interval definido
    setInterval(MudaTexto, interval);
});
0
6

Marcelo e Diego já forneceram soluções eficientes para o seu problema; Mas aqui vou colocar uma um pouco diferente, caso se interesse em algum momento em mostrar textos aleatórios ...

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

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

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