Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>position:absolute;
left: 350px;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
}
</style>
<div id="pos2">
<style>position:absolute;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
left: -400px;
top: 150px;
}
</style>
<div id="pos3">
<style>position:absolute;
width: 360px;
height: 100px;
background-color:#b2bcbc;
margin: 20px;
padding: 20px;
left: 750px;
top:-5px;
}
</style>
<div id="pos4">
<style>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>Carregando comentários...