javascript - Why is my setInterval for a carousel not working? - Stack Overflow

admin管理员组

文章数量:1433954

I've been trying to make my carousel work with arrows manually and for it to automatically slide as well but the automatic slide part isn't working. The arrows work fine im not sure if they're the issue tho.

let diapositiveActuelle = 1;

afficherDiapositives(diapositiveActuelle);

function diapositiveSuivante(n) {
  afficherDiapositives(diapositiveActuelle += n);
}

function afficherDiapositives(n) {
  let i;
  let diapositives = document.getElementsByClassName("Galerie");

  if (n > diapositives.length) {
    diapositiveActuelle = 1;
  }
  if (n < 1) {
    diapositiveActuelle = diapositives.length;
  }

  for (i = 0; i < diapositives.length; i++) {
    diapositives[i].style.display = "none";
  }

  diapositives[diapositiveActuelle - 1].style.display = "block";
}

setInterval(function() {
  diapositiveActuelle++;
  afficherDiapositives(diapositiveActuelle);
}, 3000);

.Galerie {
  display: none
}

img {
  vertical-align: middle;
}

.Carousel {
  max-width: 70%;
  position: relative;
  margin: auto;
  transition: scale 1000ms;
  cursor: zoom-in;
}

.Carousel :hover {
  scale: 110%;
}

.avant,
.suivant {
  cursor: pointer;
  position: absolute;
  top: 60%;
  width: auto;
  padding: 16px;
  margin-top: -10vh;
  color: white;
  font-size: 3vh;
}

.suivant {
  right: 0;
  border-radius: 3px 0 0 3px;
}

<div class="Carousel">

  <div class="Galerie " style="display: block;">

    <img src="/200/300" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/id/237/200/300" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/seed/picsum/200/300" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/200/300?grayscale" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/id/870/200/300?grayscale&blur=2" style="width:100%">
  </div>

  <div class="Galerie ">
    <img src="/200/300/?blur" style="width:100%">
  </div>

  <a class="avant" onclick="diapositiveSuivante(-1)">&#10094</a>
  <a class="suivant" onclick="diapositiveSuivante(1)">&#10095</a>

</div>

本文标签： javascriptWhy is my setInterval for a carousel not workingStack Overflow