Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Fábio Leandro

Imagens rotativas altomaticas

Por , em Javascript

Recommended Posts

Fábio Leandro    0

Fábio Leandro
Postado

Olá pessoal, tudo bem?estou com o seguinte problema:quero criar em javascript e css(se precisar), uma telinha em que exiba as imagens e as mantenha por 10 segundos, então ela troca e passa para outra imagem, podendo o usuario ver os restantes produtos. Gostaria tambem de conseguir colocar um botão que me disponibilizasse a condição de voltar e prosseguir nas imagens, caso o usuario queira ver novamente o produto.eu não estou conseguindo achar materias sobre isso, nem como se chama isso que eu quero fazer eu sei!caso estejam em duvida no que eu estou falando, vejam na UOL, aquele quadrinho que tem uns botões "Proximo" e "Anterior" que te permite ver novamente a noticia.bom pessoal, obrigado pela atenção de voces...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Penna    0

Eduardo Penna
Postado

Bom dia pessoal, é um pouco trabalhoso fazer essa esquema mas não é difícil.Primeira coisa, executar determinada ação num determinado intervalo de tempo: setInterval. Com ela poderemos chamar uma função que fará a troca das notícias/imagens a cada 5 segundos por exemplo.Nessa função, você pega o objeto que contém o conteúdo que você quer trocar (ex: uma div que contenha as imagens e textos da matéria) e pela propriedade innerHTML, você substitui o conteúdo antigo pelo novo. Para facilitar, você pode usar um array que armazena os dados. Ex:

<html> <script>	var proximaNoticia = 0;	//o array onde ficam as notícias	var arrNoticias = new Array();	arrNoticias[0] = "Primeira notícia";	arrNoticias[1] = "Segunda notícia, maior";	arrNoticias[2] = "Esta é a terceira";	arrNoticias[3] = "E por último, mas não menos importante...";	function mudaNoticia(){	//é aqui que o conteúdo da div é trocado pelo conteúdo do array	document.getElementById('divNoticias').innerHTML = arrNoticias[proximaNoticia];	//um if para saber qual a próxima notícia	if (proximaNoticia == arrNoticias.length-1)	{		proximaNoticia = 0;	}	else	{		proximaNoticia++;	}}//faz executar a função mudaNoticia a cada 3 segundo (3000 milesimos de segundo)window.setInterval(mudaNoticia, 3000);</script><body onLoad="mudaNoticia()">	<div id="divNoticias"></div>	</body></html>
Este exemplo é muito simples, mas entendendo você consegue fazer todo o resto. O mais prático e acredito que mais correto seria utilizar ajax para isso, mas como você não conhece javascript ficaria mais difícil.Se for trocar uma imagem, basta acrescentar dentro da função algo do tipo:
document.getElementById('id_da_minha_imagem').src = 'nova_imagem.jpg';
e você pode armazenar os caminhos da imagem num outro array também.Dê uma estudada nesse código e qualquer coisa vá postando aqui. Estava pensando em fazer um tutorial para isso mas estou atolado de trampo, de qualquer forma você deve achar fácil na net códigos prontos que façam isso.Abraço.PS: para fazer efeito de fade in fade out você teria que usar uma bliblioteca javascript e para os botões de avançar e voltar você usa o seguinte código num botão por exemplo:

<input type="button" onClick="mudaNoticia();" value="avançar"><input type="button" onClick="proximaNoticia--;mudaNoticia();" value="voltar">

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gaya    0

Gaya
Postado

Pegando o embalado,hehehehehehe... Estou com a seguinte dúvida, utilizei o código apresentado, porém queria saber como eu faço para que no momento em que eu passar o mouse em cima do

 

texto rotativo, fique estatico, ou seja sem mudar para outra notícia/texto. Tentei usar dentro do "div"<div id="divNoticias" onMouseOver="this.stop();" onMouseOut = 'this.start()'></div>. Só que não funcionam, apenas funciona dentro do marque,procurei em vários forúns, mas ainda não encontrei nada. Poderiam me ajudar???Valew!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito