Difficulty in the right images but they are diagonal

Question

Difficulty in the right images but they are diagonal

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Here is my code:

    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>

javascript html

asked by anonymous 26.12.2017 / 13:10

2 answers

0

I did not validate your javascript, but the visual solution that I thought I was looking for I solved with CSS, including removing all redundant attributes from its elements. See if that's what you're after.

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>

26.12.2017 / 15:32

Upload amazon s3 Return string array in c

score 0 · Accepted Answer

Follow sample code. Turn it around and see if it solves your problem:

<!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>