Problem with zIndex Javascript

Asked

Viewed 152 times

1

The script will be a banner rotating two buttons: forward and back.

I’m getting to know Javascript better and I have a question. Why doesn’t it recognize Anteslide and Proxslide?

Follows the code:

	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>

I declared them before starting the function, so that these variables could be used by other functions. Any suggestions?

javascript html css3

  • NOTE: My current problem is this zIndex issue. The functions below are not correct yet.

  • Did you get an answer to your question?

  • I couldn’t work with the z-index and I couldn’t make the system recognize the variables I report either. I used another strategy to create the banner.

  • Okay. Put an answer to your question, so help other people.

1 answer

1

Analyzing the code, I realized that using z-index would be confusing. I used Transition within css and the following formula within 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);
});

Browser other questions tagged javascript html css3

You are not signed in. Login or sign up in order to post.