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...
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeEu 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...
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>
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);
});
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>