0

Está aqui o meu código:

    var myIndex1 = 0;
    var myIndex2 = 0;
    var myIndex3 = 0;
    carousel();

    function carousel() {
      var i;
      var x1 = document.getElementsByClassName("mySlides1");
      var x2 = document.getElementsByClassName("mySlides2");
      var x3 = document.getElementsByClassName("mySlides3");
      for (i = 0; i < x1.length; i++) {
        x1[i].style.display = "none";
      }
      for (i = 0; i < x2.length; i++) {
        x2[i].style.display = "none";
      }
      for (i = 0; i < x3.length; i++) {
        x3[i].style.display = "none";
      }
      myIndex1++;
      if (myIndex1 > x1.length) {myIndex1 = 1}
      x1[myIndex1-1].style.display = "block";
      myIndex2++;
      if (myIndex2 > x2.length) {myIndex2 = 1}
      x2[myIndex2-1].style.display = "block";
      myIndex3++;
      if (myIndex3 > x3.length) {myIndex3 = 1}
      x3[myIndex3-1].style.display = "block";
      setTimeout(carousel, 2000);
    }
<div class="w3-content w3-section" >
    <img class="mySlides1" src="1.png" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="2.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="3.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="4.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="5.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="6.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro1.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro2.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro3.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro4.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro5.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro6.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
            <img class="mySlides3" src="larive1.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive2.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive3.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive4.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive5.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive6.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">

</div>

6
  • Lucas melhor seu título. Seja objetivo com apenas 5 ou 6 palavras. O restante vc coloca no corpo de texto da pergunta. Coloque também o seu HTML e CSS para facilitar na resposta.
    – hugocsl
    Commented 26/12/2017 às 12:20
  • se eu por o código todo não sei porque mas corta o html e css e um pouco java
    – user100698
    Commented 26/12/2017 às 12:36
  • Lucas use a ferramenta "Trecho JavaScript/HTML/CSS (Ctrl-M)" no campo de pergunta. É a sétima opção, ao lado de inserir Imagem.
    – hugocsl
    Commented 26/12/2017 às 12:40
  • desculpe. sou novo em programação nao percebi o que disse
    – user100698
    Commented 26/12/2017 às 12:42
  • @LucasSintra copiei para o snippet, agora falta você editar adicionando o css e explicar melhor o que você deseja fazer. Commented 26/12/2017 às 13:23

2 Respostas 2

0

Segue código de exemplo. Rode ele e veja se resolve seu problema:

<!DOCTYPE html>
<html>
<head>
  <title>Slide Show</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
    <div class="w3-content w3-row">
    <div class="w3-third">
      <img class="mySlides1" src="1.jpg" width="250" height="200" border="3">
      <img class="mySlides1" src="2.jpg" width="250" height="200" border="3">
    </div>
    <div class="w3-third w3-container">
      <img class="mySlides2" src="3.jpg" width="250" height="200" border="3">
      <img class="mySlides2" src="4.jpg" width="250" height="200" border="3">
    </div>
    <div class="w3-third w3-container">
      <img class="mySlides3" src="5.jpg" width="250" height="200" border="3">
      <img class="mySlides3" src="6.jpg" width="250" height="200" border="3">
    </div>
  </div>
  <script>
    var myIndex1 = 0;
    var myIndex2 = 0;
    var myIndex3 = 0;
    carousel();

    function carousel() {
      var i;
      var x1 = document.getElementsByClassName("mySlides1");
      var x2 = document.getElementsByClassName("mySlides2");
      var x3 = document.getElementsByClassName("mySlides3");
      for (i = 0; i < x1.length; i++) {
        x1[i].style.display = "none";
      }
      for (i = 0; i < x2.length; i++) {
        x2[i].style.display = "none";
      }
      for (i = 0; i < x3.length; i++) {
        x3[i].style.display = "none";
      }
      myIndex1++;
      if (myIndex1 > x1.length) {myIndex1 = 1}
      x1[myIndex1-1].style.display = "block";
      myIndex2++;
      if (myIndex2 > x2.length) {myIndex2 = 1}
      x2[myIndex2-1].style.display = "block";
      myIndex3++;
      if (myIndex3 > x3.length) {myIndex3 = 1}
      x3[myIndex3-1].style.display = "block";
      setTimeout(carousel, 1000);
    }
  </script>
</body>
</html>
5
  • Só precisa substituir com os nomes das imagens, mas este código já está funcionando. Commented 26/12/2017 às 15:09
  • oi, deu. mas removeu o meu border e alterou a minha letra. da para por de volta?
    – user100698
    Commented 26/12/2017 às 20:34
  • No exemplo não tem letra alguma. Qual letra você está falando? Você pode escolher o tipo de fonte que quer via CSS ou usando os estilos do próprio W3.CSS. Commented 26/12/2017 às 21:19
  • é assim eu antes tinha escolhido arial para o meu titulo e com o <link...> mudou para outro tipo. isso é o menos importante. Sabe porque o border desapareceu? Sei que lhe é pedir muito mas será que me pode dizer o que o java script faz? tipo uma nota para ver para que serve mais ou menos. ser puder agradecia-lhe imenso
    – user100698
    Commented 26/12/2017 às 22:38
  • becode.com.br/… Commented 27/12/2017 às 1:12
0

Não validei seu javascript, mas a solução visual que me pareceu estar procurando eu resolvi com CSS, inclusive removendo todos atributos redundantes dos seus elementos. Confira se é isso que você está buscando.

var myIndex1 = 0;
    var myIndex2 = 0;
    var myIndex3 = 0;
    carousel();

    function carousel() {
      var i;
      var x1 = document.getElementsByClassName("mySlides1");
      var x2 = document.getElementsByClassName("mySlides2");
      var x3 = document.getElementsByClassName("mySlides3");
      for (i = 0; i < x1.length; i++) {
        x1[i].style.display = "none";
      }
      for (i = 0; i < x2.length; i++) {
        x2[i].style.display = "none";
      }
      for (i = 0; i < x3.length; i++) {
        x3[i].style.display = "none";
      }
      myIndex1++;
      if (myIndex1 > x1.length) {myIndex1 = 1}
      x1[myIndex1-1].style.display = "block";
      myIndex2++;
      if (myIndex2 > x2.length) {myIndex2 = 1}
      x2[myIndex2-1].style.display = "block";
      myIndex3++;
      if (myIndex3 > x3.length) {myIndex3 = 1}
      x3[myIndex3-1].style.display = "block";
      setTimeout(carousel, 2000);
    }
.w3-section img{
  height:200px;
  width:250px;
  border:3px solid black;
  position:relative;
  float:left;
  display:inline;
  margin:5px;
}
<div class="w3-content w3-section" >
    <img class="mySlides1" src="1.png">
    <img class="mySlides1" src="2.jpg">
    <img class="mySlides1" src="3.jpg">
    <img class="mySlides1" src="4.jpg">
    <img class="mySlides1" src="5.jpg">
    <img class="mySlides1" src="6.jpg">
    
    <img class="mySlides2" src="cozinheiro1.jpg">
    <img class="mySlides2" src="cozinheiro2.jpg">
    <img class="mySlides2" src="cozinheiro3.jpg">
    <img class="mySlides2" src="cozinheiro4.jpg">
    <img class="mySlides2" src="cozinheiro5.jpg">
    <img class="mySlides2" src="cozinheiro6.jpg">
    
    <img class="mySlides3" src="larive1.jpg">
    <img class="mySlides3" src="larive2.jpg">
    <img class="mySlides3" src="larive3.jpg">
    <img class="mySlides3" src="larive4.jpg">
    <img class="mySlides3" src="larive5.jpg">
    <img class="mySlides3" src="larive6.jpg">
</div>

2
  • copiei o seu codigo e pus no meu e não deu continua a fazer a mesma coisa que estava a fazer antes. ou seja as imagens ficam na diagonal em vez de ficarem retas
    – user100698
    Commented 26/12/2017 às 14:59
  • removeu os seus vspace e hspace? Commented 26/12/2017 às 15:00

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