Olá galera, tenho um código que fará a ponte de transição de informações, é um pouco parecido com aquela telinha no IG, Terra etc que fica passando noticias manjam?
To com um problema, não consigo fazer com que os textos passem do 1 para o 2 do 2 para o 3 e assim por diante automaticamente e quando chegar no final faça o loop mostrando as informações/imagens automaticamente desde o começo de novo, segue o código:
<html>
<head>
<title>Destaques</title>
<style type="text/css">
<!--
.fora{
width: 300px;
height: 150px;
border: #0099cc 1px Solid;
padding: 10px;
}
.i_esq{
width: 135px;
height: 130px;
border: #000000 1px Solid;
float: left;
}
.i_dir{
width: 135px;
height: 130px;
border: #000000 1px Solid;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
imagens = new Array();
textos = new Array();
imagens[0] = '<img src="imagens/imagem1.gif" width="130px" height="60px">';
imagens[1] = '<img src="imagens/imagem2.gif" width="130px" height="60px">';
imagens[2] = '<img src="imagens/imagem3.gif" width="130px" height="60px">';
imagens[3] = '<img src="imagens/imagem4.gif" width="130px" height="60px">';
textos[0] = 'Fernando Costa Migliorini';
textos[1] = 'bla bla bla bla bla bla bla bla bla';
textos[2] = 'o rato roeu a roupa do rei de roma';
textos[3] = 'Italia Italy Italia Italy Italia Italy Italia Italy Italia Italy';
cont = 0;
function muda(){
cont++;
if (cont == 4){
cont = 0;
}
document.getElementById('esq').innerHTML = imagens[cont];
document.getElementById('dir').innerHTML = textos[cont];
}
//-->
</script>
</head>
<body>
<div align="center" class="fora" style="width: 147px; height: 150px">
<div id="esq" class="i_esq" style="width: 130px; height: 60px"><script> document.write(imagens[0]); </script></div>
<div id="dir" class="i_dir" style="width: 130px; height: 78px"><script> document.write(textos[0]); </script></div>
<a onclick="muda();" onmouseover="style.cursor= 'pointer';">Próximo</a>
</div>
</body>
</html>
Pergunta
maktub
Olá galera, tenho um código que fará a ponte de transição de informações, é um pouco parecido com aquela telinha no IG, Terra etc que fica passando noticias manjam?
To com um problema, não consigo fazer com que os textos passem do 1 para o 2 do 2 para o 3 e assim por diante automaticamente e quando chegar no final faça o loop mostrando as informações/imagens automaticamente desde o começo de novo, segue o código:
<html> <head> <title>Destaques</title> <style type="text/css"> <!-- .fora{ width: 300px; height: 150px; border: #0099cc 1px Solid; padding: 10px; } .i_esq{ width: 135px; height: 130px; border: #000000 1px Solid; float: left; } .i_dir{ width: 135px; height: 130px; border: #000000 1px Solid; } --> </style> <script language="JavaScript" type="text/javascript"> <!-- imagens = new Array(); textos = new Array(); imagens[0] = '<img src="imagens/imagem1.gif" width="130px" height="60px">'; imagens[1] = '<img src="imagens/imagem2.gif" width="130px" height="60px">'; imagens[2] = '<img src="imagens/imagem3.gif" width="130px" height="60px">'; imagens[3] = '<img src="imagens/imagem4.gif" width="130px" height="60px">'; textos[0] = 'Fernando Costa Migliorini'; textos[1] = 'bla bla bla bla bla bla bla bla bla'; textos[2] = 'o rato roeu a roupa do rei de roma'; textos[3] = 'Italia Italy Italia Italy Italia Italy Italia Italy Italia Italy'; cont = 0; function muda(){ cont++; if (cont == 4){ cont = 0; } document.getElementById('esq').innerHTML = imagens[cont]; document.getElementById('dir').innerHTML = textos[cont]; } //--> </script> </head> <body> <div align="center" class="fora" style="width: 147px; height: 150px"> <div id="esq" class="i_esq" style="width: 130px; height: 60px"><script> document.write(imagens[0]); </script></div> <div id="dir" class="i_dir" style="width: 130px; height: 78px"><script> document.write(textos[0]); </script></div> <a onclick="muda();" onmouseover="style.cursor= 'pointer';">Próximo</a> </div> </body> </html>Help!
Link para o comentário
Compartilhar em outros sites
3 respostass a esta questão
Posts Recomendados