1

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?

4
  • OBS: Meu problema atual é esta questão do zIndex. As funções abaixo ainda não estão corretas. Commented 2/09/2016 às 20:21
  • Você conseguiu uma resposta para sua pergunta?
    – durtto
    Commented 26/09/2016 às 11:14
  • Não consegui trabalhar com o z-index e também não consegui fazer o sistema reconhecer as variáveis que informo. Utilizei outra estratégia para criar o banner. Commented 27/09/2016 às 12:56
  • Ok. Coloque uma resposta para sua pergunta, para assim ajudar outras pessoas.
    – durtto
    Commented 27/09/2016 às 13:07

1 Resposta 1

1

Analisando o código, acabei percebendo que utilizar o z-index seria confuso. Utilizei o transition dentro do css e a seguinte formula dentro do JAVASCRIPT

var slideAtual = 0;
var timeOut = '';
var ajustaZIndex = 0;
var x = document.getElementsByClassName('exibe');
var y = document.getElementsByClassName('pass');
Temporizador(true);
function Temporizador(initiate) {
    if(slideAtual == x.length){
        for(var i = 0; i <= (x.length - 1); i++){
            x[i].style.display = 'none';
            y[i].classList.remove('ativo');
        }
        timeOut = setTimeout(Temporizador, 0500);
        slideAtual = 0;
    }else{

        y[slideAtual].classList.add('ativo');
        x[slideAtual].style.display = 'block';
        timeOut = setTimeout(Temporizador, 5500);
        slideAtual++;
    }
}
function banner(n){
    clearTimeout(timeOut);
    slideAtual = n;
    for(var i = 0; i < x.length; i++){
        x[i].style.display = 'none';
        y[i].classList.remove('ativo');
    }
    y[slideAtual].classList.add('ativo');
    x[n].style.display = 'block';
    timeOut = setTimeout(Temporizador, 2500);

}
$(function() {
    Temporizador(true);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .