Slide Show Java Script Error

Question

Slide Show Java Script Error

Navigation

#1 by (0 votes)

1

So my slideshow is only working the first image, the other images do not appear to me.

JAVASCRIPT

{
  let satual = 1;
  let smax = 3;
  let stmp = 3000;

  function troca() {

    document.getElementById("e1").style.visibility = "hidden";
    document.getElementById("e2").style.visibility = "hidden";
    document.getElementById("e3").style.visibility = "hidden";

    document.getElementById("e" + satual).style.visibility = "visible";

    satual = satual + 1;

    if (satual > smax) {
      satual = 1;
    }
  }

  function slider() {

    document.getElementById("e1").style.visibility = "hidden";
    document.getElementById("e2").style.visibility = "hidden";
    document.getElementById("e3").style.visibility = "visible";

    sLiderTimer = setInterval(troca, stmp);
  }
}

<html>
<meta charset="utf-8">
<head>
	<title>Controla</title>
	<link rel="stylesheet" type="text/css" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="slider()">

<div class="small"></div>

<div class="medium"></div>

<div class="large"></div>

<header id="cabecalho">
<div class="interface">
<img id="Logo" src="imagens/controla.png" style="width:350px; height:355px; margin-left: 51%;">
 </div>
</header>

<div class="menu">
	<ul>
		<li><a href="index.php">Página Inicial</a></li>
		<li><a href="login.php">Login</a></li>
		<li><a href="Cadastro.php">Cadastrar</a></li>
		<li><a href="#">Sobre Nós</a></li>
	</ul>
</div>
    
<section id="banner">
    <div id="slider">
        <a id="e1" href="Cadastro.php"><img src="imagens/Imagem1.jpg"></a> 
        <img id="e2" src="imagens/Imagem2.jpg">
        <img id="e3" src="imagens/Imagem3.jpg">
    </div>
</section>
</body>
<footer id="sobrepg">    
<p> &copy; Controla Estoque 2018</p><br>

<h5 style="margin-left: -7.9em;position: relative;"> Um sistema de controle de estoque adequável para comercio de pequenas e microempresas, sendo padaria, pet shop, papelaria entre outros comércios existentes.</h5>
</footer>

/*-------section---------*/
section
{
    background-color: #008153;
    padding: 6em 201px 30px;
    width: 78.1%;
    margin-left: -100px;
    padding-bottom: 100px;
     
}

/*-------slideshow--------*/
*
{
    margin: 0px;
    padding: 0px;
}

#slider
{
    width: 842px;
    height: 312px;
    margin: 0px auto;
    overflow: hidden;
    position: relative;
}

#slider
{
    margin-left: 150px;
}

javascript

asked by anonymous 20.03.2018 / 18:57

1 answer

Problems typing virtual keyboard Firemonkey Android Join two IFs or more

score 0 · Accepted Answer

Instead of using visibility hidden / visible , use display none / block . The hidden% only makes the element invisible, but it continues to occupy space on the page. This is the cause of the other images not appearing, because they are outside the visible area, occupied only by the first image.

Replace your script with this:

let satual = 1;
let smax = 3;
let stmp = 3000;

function troca() {

   document.getElementById("e1").style.display = "none";
   document.getElementById("e2").style.display = "none";
   document.getElementById("e3").style.display = "none";

   document.getElementById("e" + satual).style.display = "block";

   satual = satual + 1;

   if (satual > smax) {
      satual = 1;
   }
}

function slider() {

   document.getElementById("e1").style.display = "none";
   document.getElementById("e2").style.display = "none";
   document.getElementById("e3").style.display = "block";

   sLiderTimer = setInterval(troca, stmp);
}