Ir para conteúdo

POWERED BY:

Arquivado

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

everton881

Rotação javaScript

Por , em Javascript

Recommended Posts

everton881    0

everton881
Postado

Bom dia galera,

 

vê só estou com uma dificuldade, estou tentando fazer uma rotação entre 4 banners ao atualizar a pagina por exemplo, eu clico no reload o banner que esta na posição 1 vai para posição 2 e o que ta na posição 2 vai para posição 3 e assim sucessivamente. Certo eu consegui fazer a primeira parte que é rotacionar uma vez, só que a informação anterior não apaga, alguém poderia me ajuda se tem alguma forma de apagar a informação anterior. Segue o código abaixo:

 

var pos1 = document.querySelector("#pos1");
var posicao1 = "<p id='posicao1' >posição 1</p>";
pos1.innerHTML = pos1.innerHTML + posicao1;
var pos2 = document.querySelector("#pos2");
var posicao2 = "<p id='posicao2' >posição 2</p>";
pos2.innerHTML = pos2.innerHTML + posicao2;
var pos3 = document.querySelector("#pos3");
var posicao3 = "<p id='posicao3' >posição 3</p>";
pos3.innerHTML = pos3.innerHTML + posicao3;
var pos4 = document.querySelector("#pos4");
var posicao4 = "<p id='posicao4' >posição 4</p>";
pos4.innerHTML = pos4.innerHTML + posicao4;
var reload = document.querySelector("#reload");
reload.addEventListener("click", function(event){
event.preventDefault();
var pos1 = document.querySelector("#pos1");
pos1.innerHTML = pos1.innerHTML + posicao4;
var pos2 = document.querySelector("#pos2");
pos2.innerHTML = pos2.innerHTML + posicao1;
var pos3 = document.querySelector("#pos3");
pos3.innerHTML = pos3.innerHTML + posicao2;
var pos4 = document.querySelector("#pos4");
pos4.innerHTML = pos4.innerHTML + posicao3;
console.log(pos1);
console.log(pos2);
console.log(pos3);
console.log(pos4);
});
codigo html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="pos1">
<style>
div#pos1{
position:absolute;
left: 350px;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
}
</style>
<div id="pos2">
<style>
div#pos2{
position:absolute;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
left: -400px;
top: 150px;
}
</style>
<div id="pos3">
<style>
div#pos3{
position:absolute;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
left: 750px;
top:-5px;
}
</style>
<div id="pos4">
<style>
div#pos4{
position:absolute;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
left: -420px;
top: 130px;
}
</style>
<button id="reload"> Atualizar</button>
<script src=rotacao.js></script>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

Existem algumas coisas que você precisa fazer antes de seu código funcionar direito. A estrutura do HTML não está correta, é preciso fechar essas tags de divs, e deixar o CSS da tag style no header, de preferência!

 

Dei uma enxugada no seu código, veja:

 

HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
      <style>
         /* Um css geral para todas as divs flutuantes */
         .floatdivs {
            position: absolute;
            height: 100px;
            width: 360px;
            background-color: #b2bcbc;
            margin: 20px;
            padding: 20px;
         }
         div#pos1{left: 350px;}
         div#pos2{left: 40px;top: 155px;}
         div#pos3{left: 650px;top:155px;}
         div#pos4{left: 350px;top: 300px;}
      </style>
   </head>
   <body>
      <div class="floatdivs" id="pos1"></div>
      <div class="floatdivs" id="pos2"></div>
      <div class="floatdivs" id="pos3"></div>
      <div class="floatdivs" id="pos4"></div>
      <button id="reload"> Atualizar</button>
   </body>
</html>

E no Javascript, você pode fazer de forma bem simples. Trata-se de uma troca de valores:

 

Guarde os trechos em HTML em variáveis, atribua o valor da variável seguinte na div, e atualize os valores das variáveis com os valores presentes na div, e pronto!

<script>
   /* Seleção dos elementos */
   var pos1 = document.querySelector("#pos1");
   var pos2 = document.querySelector("#pos2");
   var pos3 = document.querySelector("#pos3");
   var pos4 = document.querySelector("#pos4");

   /* Valores e inserção dos valores */
   var posicao1 = '<p id="posicao1">posição 1</p>';
   var posicao2 = '<p id="posicao2">posição 2</p>';
   var posicao3 = '<p id="posicao3">posição 3</p>';
   var posicao4 = '<p id="posicao4">posição 4</p>';
   pos1.innerHTML += posicao1;
   pos2.innerHTML += posicao2;
   pos3.innerHTML += posicao3;
   pos4.innerHTML += posicao4;

   var reload = document.querySelector("#reload");
   reload.addEventListener("click", rotaciona);

   /* Função modifica os valores, e atualiza as varíaveis */
   function rotaciona(event) {
      event.preventDefault();
      pos1.innerHTML = posicao2
      pos2.innerHTML = posicao3;
      pos3.innerHTML = posicao4;
      pos4.innerHTML = posicao1;
      posicao1 = pos1.innerHTML;
      posicao2 = pos2.innerHTML;
      posicao3 = pos3.innerHTML;
      posicao4 = pos4.innerHTML;
   }
</script>

Coloquei uma versão no JSFiddle, um pouco menor, mas que também funciona ;) veja:

 

http://jsfiddle.net/lucasmedina/36vcm6y5/

Compartilhar este post

Link para o post
Compartilhar em outros sites

everton881    0

everton881
Postado

Pow nem me liguei que nao tinha fechado as divs falta de atenção a minha, era tão simples assim valeu mesmo agora vou tentar fazer um loop pra cada reload ela mudar. Valeu mesmo Lucas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

Pow nem me liguei que nao tinha fechado as divs falta de atenção a minha, era tão simples assim valeu mesmo agora vou tentar fazer um loop pra cada reload ela mudar. Valeu mesmo Lucas.

 

Não foi nada, Everton!

Não deixe de compartilhar suas ideias e descobertas com a galera do fórum. Conhecimento é bom, e a gente gosta ;)

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