O script será um banner rotativo dois botões: avançar e voltar.
Estou começando a conhecer melhor o JavaScript e tenho uma dúvida. Por que é que ele não reconhece o AnteSlide e o ProxSlide?
Segue o código:
var primeiraExecusao = true;
var slideAtual = 0;
var proxSlide = 0;
var anteSlide = 0;
var timeOut = '';
x = document.getElementsByClassName('img');
function Temporizador(initiate) {
proxSlide = slideAtual + 1;
anteSlide = slideAtual - 1;
if(slideAtual == x.length){
proxSlide = 0;
}else if(slideAtual == 0){
anteSlide = x.length;
}
x[anteSlide].style.zIndex = '5';
x[proxSlide].style.zIndex = '7';
alert(anteSlide + " - " + proxSlide + " - " + slideAtual + " - " + x.length);
x[slideAtual].style.zIndex = '10';
if(primeiraExecusao == true){
primeiraExecusao = false;
x[slideAtual].style.display = 'block';
}else{
x[slideAtual].style.display = 'block';
}
if(slideAtual == x.length){
timeOut = setTimeout(Desativa, 5500);
}else{
timeOut = setTimeout(Temporizador, 5500);
}
slideAtual++;
}
function Desativa(){
var i;
for(i = 0; i < x.length; i++){
x[i].style.display = 'none';
}
primeiraExecusao = true;
timeOut = setTimeout(Temporizador, 100);
}
function avancar(){
clearTimeout(timeOut);
/*if(slideAtual == x.length){
slideAtual = 0;
}else{
slideAtual + 1;
}
timeOut = setTimeout(Temporizador, 100);*/
}
function voltar(){
clearTimeout(timeOut);
var i;
for(i = 0; i < x.length; i++){
x[i].style.display = 'none';
}
if(slideAtual == 0){
slideAtual = x.length;
}else{
slideAtual - 1;
}
}
$(function() {
Temporizador(true);
});
body{
background-color: green;
}
.img{
max-width: 50%;
min-width: 30%;
height: 200px;
position: relative;
top:0;
left: 0;
-webkit-animation-name: fade;
-webkit-animation-duration: 5.5s;
animation-name: fade;
animation-duration: 5.5s;
z-index: auto;
}
@-webkit-keyframes fade {
from {opacity: .0}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .0}
to {opacity: 1}
}
.lastSlide{
-webkit-animation-name: fadeout;
-webkit-animation-duration: 5.5s;
animation-name: fadeout;
animation-duration: 5.5s;
}
@-webkit-keyframes fadeout {
from {opacity: 1}
to {opacity: 0}
}
@keyframes fadeout {
from {opacity: 1}
to {opacity: 0}
}
.fundo{
max-width: 50%;
min-width: 30%;
height: 200px;
position: absolute;
top:0;
left: 0;
background-color: pink;
}
.um{
}
.dois{
}
.desativado{
display: none;
}
.setas{
padding: 30px;
background-color: blue;
opacity: 0.4;
font-size: 4em;
color: white;
}
.setas:hover{
opacity: 0.8
}
<!DOCTYPE html>
<head>
<link rel='stylesheet' href='css/slide.css'/>
<script type='text/javascript' src='js/slide.js'></script>
</head>
<body onload="Temporizador(true)">
<div class='img um'><img src='img/slide/img1.jpg'></div>
<div class='img dois'><img src='img/slide/img2.jpg'></div>
<div class='img um desativado'><img src='img/slide/img3.jpg'></div>
<span class='setas anterior' onclick='voltar()'><</span>
<span class='setas posterior' onclick='acancar()'>></span>
</body>
</html>
Eu os declarei antes de iniciar a função, para que essas variáveis pudessem ser utilizadas por outras funções. Alguma sugestão?