L oop вернуться к началу после setInterval

Question

У меня есть список, содержащий изображения, и я пытаюсь показать изображение каждую секунду (при сохранении предыдущих изображений), затем, когда все изображения были показаны, - скрыть все и снова запустить процесс. Мне удалось создать эффект, который я хочу, используя setInterval, но я не знаю, как потом скрыть все и начать заново, также число изображений в списке будет меняться, поэтому оно будет неизвестным.

Это то, что я имею до сих пор

         <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*/           
    });

Answer 1

Создание функции и проверка состояния на основе длины и скрытие вашего изображения.

$(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>

Answer 2

Самое простое решение для вас - добавить простое:

$(slides).hide()

, когда вы достигли slides.length.

Более интуитивное и "более простое" решение, на мой взгляд, использует асинхронное соединение. Вместо этого c.

$(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();
}

Если вы хотите, чтобы l oop через функцию "l oop" бесконечно, вы можете создать новую асин * c функцию:

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);
       }
}

Asyn c программирование в js преобразует ваши представления о долгосрочных задачах, таких как эта. Это позволяет вам писать неблокирующие функции итеративным способом, заставляя его становиться «простым» и «легким».

Answer 3

У вас уже есть условие для сброса x в 1; используйте тот же блок условий для сброса состояния слайд-шоу. Затем вы можете сделать вещи немного повторяющимися с помощью нескольких вспомогательных функций:

$(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);
});