Mam listę zawierającą obrazy i próbuję wyświetlać obraz co sekundę (zachowując poprzednie obrazy wyświetlane), a gdy wszystkie obrazy zostaną pokazane - ukryj wszystko, a następnie rozpocznij proces od nowa. Udało mi się stworzyć efekt, który chcę, używając setInterval, ale nie wiem, jak to wszystko ukryć i zacząć od nowa, również liczba zdjęć na liście będzie się różnić, więc będzie to nieznana ilość.

To, co mam do tej pory

         <ul id="slider">
            <li><img src="images/image1.jpg" width="300px"/></li>
            <li><img src="images/image2.jpg" width="200px"/></li>
            <li><img src="images/image3.jpg" width="100px"/></li>
            <li><img src="images/image1.jpg" width="50px"/></li>
            <li><img src="images/image2.jpg" width="20px"/></li>

        </ul>

        $(document).ready(function () {


        /*Slider*/
        var slides = $("#slider > li > img");
        $(slides).hide();
        $(slides).parents("#slider>li:nth-child(1)").find("img").show();

        var x = 1;
        setInterval(function () {

            $(slides).parents("#slider>li:nth-child(" + x + ")").find("img").show();
            if (x == slides.length)

                x = 1;
            else

            x++;
        }, 1000);
        /*End*/           
    });
-1
Jon Jones 1 kwiecień 2020, 10:20

3 odpowiedzi

Najlepsza odpowiedź

Masz już warunek, aby zresetować x do 1; użyj tego samego bloku warunku, aby zresetować stan pokazu slajdów. Następnie możesz sprawić, że rzeczy będą mało powtarzalne za pomocą kilku funkcji pomocniczych:

$(document).ready(function() {
  var slides = $("#slider > li > img");
  function showImage(x) {
    $(slides)
      .parents("#slider>li:nth-child(" + x + ")")
      .find("img")
      .show();
  }
  var x;
  function reset() {
    x = 1;
    $(slides).hide();
    showImage(1);
  }
  reset();

  setInterval(function() {
    if (x > slides.length) {
      reset();
    } else {
      showImage(x);
      x++;
    }
  }, 1000);
});

0
AKX 1 kwiecień 2020, 07:36

Utwórz funkcję i sprawdź warunek na podstawie długości i ukryj swój obraz.

$(document).ready(function() {

  /*Slider*/
  var slides = $("#slider > li > img");
  var length = slides.length;
  $(slides).hide();
  $(slides).parents("#slider>li:nth-child(1)").find("img").show();

  var x = 1;
  setInterval(function() {
    function loop() {
      $(slides).parents("#slider>li:nth-child(" + x + ")").find("img").show();
      if (x == slides.length + 1) {
        $(slides).hide();
        x = 1;
      } else

        x++;
    }
    loop();
    return loop;

  }, 1000);


  /*End*/
});
#slider > li {
  list-style: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="slider">
  <li><img src="images/image1.jpg" width="300px" /></li>
  <li><img src="images/image2.jpg" width="200px" /></li>
  <li><img src="images/image3.jpg" width="100px" /></li>
  <li><img src="images/image1.jpg" width="50px" /></li>
  <li><img src="images/image2.jpg" width="20px" /></li>

</ul>
0
Shree 2 kwiecień 2020, 03:29

Najłatwiejszym rozwiązaniem dla Ciebie jest dodanie prostego:

$(slides).hide()

Kiedy osiągnąłeś slides.length.

Moim zdaniem bardziej intuicyjnym i „łatwiejszym” rozwiązaniem jest użycie funkcji asynchronicznej.

$(document.ready(() => {
      let slides = $('slider>li>img');
      $(slides).hide();

      // Calling loop without await causes it to run without blocking the main function
      loop(slides, 1000);
})

const loop = async (slides, duration) => {
      slides.forEach(slide => {
            $(slide).show();

            // sleep for duration ms
            await new Promise(r => setTimeout(r, duration));
      }

     // After looping through all slides, hide them
     $(slides).hide();
}

Jeśli chcesz w nieskończoność przechodzić przez funkcję „loop”, możesz utworzyć nową funkcję asynchroniczną:

const looploop = async (slides, duration) => {
       // Using the await keyword will wait for the loop function to finish,
       // And only then will it call it again.
       // The trick here is that the waiting is in the async function scope
       // so if you were to call looploop without await in the main function
       // it wouldn't block it.
       while(true) {
             await loop(slides, duration);
       }
}

Programowanie asynchroniczne w js zmienia sposób myślenia o długotrwałych zadaniach, takich jak to. Pozwala na pisanie funkcji nieblokujących w sposób iteracyjny, przez co staje się „prosty” i „łatwy”.

-1
Gonnen Daube 1 kwiecień 2020, 07:52