Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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...
porque você não tenta ver o código do UOL.
Não adiante cara, não entendo nada de javascript, tentei fazer isso e nada!me explique, se puder, como fazer isso...obrigado
pultz.. tambem estou querendo saber como isso funciona... alguem sabe?????????????? alem do site do uol tem um outro nesse site aqui tambem:
pultz.. tambem estou querendo saber como isso funciona... alguem sabe?????????????? alem do site do uol tem um outro nesse site aqui tambem:
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">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!!!
porque você não tenta ver o código do UOL.