Java Script Slide Show Error

Asked

Viewed 26 times

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

  • The script seems to work normally. You would have to post the CSS question in order to see.

1 answer

0


Instead of using visibility Hidden/Visible, use display None/block. The visibility Hidden just makes the element invisible, but it still takes up space on the page. This is why the other images do not appear, as 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);
}

Browser other questions tagged javascript

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