如何循环 jquery 代码或重新启动它？

Question

How can I loop this code so that it runs after the script finishes running. Then he repeats it all over again.

i wanna make repat this code infinity times.

This is jquery 3.5.1

// Title
    var title1 = document.getElementById("slide-text-title-id");
    var title2 = document.getElementById("slide-text-title-id-2");
    var title3 = document.getElementById("slide-text-title-id-3");

        $(document).ready(function () {
            setTimeout(function () {
                $(title1).css("opacity", "1");
                $(title1).css("transition", "0.5s");
            }, 500);
            setTimeout(function () {
                $(title1).css("opacity", "0");
            }, 6000);
            setTimeout(function () {
                $(title1).css("opacity", "1");
            }, 20000);
        });

        $(document).ready(function () {
            setTimeout(function () {
                $(title2).css("opacity", "1");
                $(title2).css("transition", "0.5s");
            }, 9000);
            setTimeout(function () {
                $(title2).css("opacity", "0");
            }, 13500);
            setTimeout(function () {
                $(title2).css("opacity", "1");
            }, 20000);
        });

        $(document).ready(function () {
            setTimeout(function () {
                $(title3).css("opacity", "1");
                $(title3).css("transition", "0.5s");
            }, 16000);
            setTimeout(function () {
                $(title3).css("opacity", "0");
            }, 21000);
            setTimeout(function () {
                $(title3).css("opacity", "1");
            }, 26500);
        });

Answer 1

The principle:

// the collection:
const elements = ['a', 'b', 'c'];

// the stepper function (also called walker or iterator)
function stepper(index) {
  // the current item is elements[index];
  // do something (anything) with current item:

  console.log({
    index,
    [`currentItem (elements[${index}])`]: elements[index]
  });

  // after a while (3000ms), call this function again, with next index:
  // when current item is last, we call with `0`, so it loops:

  setTimeout(function() {
    stepper(index + 1 < elements.length ? index + 1 : 0);
    /* the above line is shorthand for:
       if (index + 1 < elements.length) {
         stepper(index + 1);
       } else {
         stepper(0);
       }
     */
  } , 3000);
}

// start the loop: 
stepper(0);

Now, let's try it with some elements. Arguably, the easiest way to handle this is to toggle the class active on a collection of slides. Using CSS, we apply styles to the active element. In order to be able to control the direction of the animation, I'm also adding a leaving class to the currently active slide, which I'm removing in the next iteration.

The rest are details. As a rule of thumb, details are important in web development.

 const elements = [1, 2, 3]; function stepper(index) { // remove class leaving from all slides $('.slider.leaving').removeClass('leaving'); // add class leaving to the previously active item and remove class active $('.slider.active').addClass('leaving').removeClass('active'); // add class active to current item $('.slider > div').eq(index).addClass('active'); setTimeout(() => stepper(index < elements.length - 1? index + 1: 0), 2100); } // start the infinite loop: stepper(0);

 body { margin: 0; }.slider { position: relative; overflow: hidden; }.slider > div { font-size: 7rem; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: absolute; top: 0; height: 100%; width: 100%; transform: translateX(100%); background-color: #ccc; color: white; }.slider.leaving { transform: translateX(-100%); transition: transform.42s cubic-bezier(.4,0,.2,1); }.slider.active { position: relative; opacity: 1; transform: translateX(0); transition: transform.42s cubic-bezier(.4,0,.2,1) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> </div>

---

Note: I tried to present the principle and then a minimal implementation. In the wild, code gets more complex and more verbose. Looking at your current attempt, I'd advise you to go through the basics first.

Probably the fastest way to learn is by watching tutorials accompanied by playing with the code presented there. Don't be afraid to change code. Change everything, little by little and see where it breaks.

At every single line you can use console.log({ stuff }) to see what's in stuff at that exact line.
Break code. The sooner you understand why it broke, the sooner you'll know that bit, too!

Answer 2

with setInterval

var interval = setInterval(function ()
{
  // Title
  var title1 = document.getElementById("slide-text-title-id");
  var title2 = document.getElementById("slide-text-title-id-2");
  var title3 = document.getElementById("slide-text-title-id-3");

  $(document).ready(function () {
      setTimeout(function () {
          $(title1).css("opacity", "1");
          $(title1).css("transition", "0.5s");
      }, 500);
      setTimeout(function () {
          $(title1).css("opacity", "0");
      }, 6000);
      setTimeout(function () {
          $(title1).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      setTimeout(function () {
          $(title2).css("opacity", "1");
          $(title2).css("transition", "0.5s");
      }, 9000);
      setTimeout(function () {
          $(title2).css("opacity", "0");
      }, 13500);
      setTimeout(function () {
          $(title2).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      setTimeout(function () {
          $(title3).css("opacity", "1");
          $(title3).css("transition", "0.5s");
      }, 16000);
      setTimeout(function () {
          $(title3).css("opacity", "0");
      }, 21000);
      setTimeout(function () {
          $(title3).css("opacity", "1");
      }, 26500);
  });

}, 0);

or setTimeout

var timer;
!function loop()
{
  // Title
  var title1 = document.getElementById("slide-text-title-id");
  var title2 = document.getElementById("slide-text-title-id-2");
  var title3 = document.getElementById("slide-text-title-id-3");

  $(document).ready(function () {
      setTimeout(function () {
          $(title1).css("opacity", "1");
          $(title1).css("transition", "0.5s");
      }, 500);
      setTimeout(function () {
          $(title1).css("opacity", "0");
      }, 6000);
      setTimeout(function () {
          $(title1).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      setTimeout(function () {
          $(title2).css("opacity", "1");
          $(title2).css("transition", "0.5s");
      }, 9000);
      setTimeout(function () {
          $(title2).css("opacity", "0");
      }, 13500);
      setTimeout(function () {
          $(title2).css("opacity", "1");
      }, 20000);
  });

  $(document).ready(function () {
      setTimeout(function () {
          $(title3).css("opacity", "1");
          $(title3).css("transition", "0.5s");
      }, 16000);
      setTimeout(function () {
          $(title3).css("opacity", "0");
      }, 21000);
      setTimeout(function () {
          $(title3).css("opacity", "1");
      }, 26500);
  });
  timer = setTimeout(loop, 0);
}();