javascript - 配置 setinterval 函数以获得无限重复

Question

我有一个 slider ，考虑到我正在引用的教程，setInterval 函数的计时没有正常工作。通常，它应该每 14 秒更换一次幻灯片，从一张幻灯片换到另一张幻灯片。但是我的 setInterval 没有重复。

这是怎么回事？

$(document).ready(function() {
  var imgItems = $('.slider li').length; //NUMBER OF SLIDES
  var imgPos = 1;

  //------------------------

  $('.slider li').hide(); // to hide the slides
  $('.slider li:first').show(); // to show the slides


  //------------------------------
  $('.right span').click(nextSlider);
  $('.left span').click(prevSlider);


  setInterval(function() {
    nextSlider();
  }, 14000);

  // FUNCTIONS =========================================================


  function nextSlider() {
    if (imgPos >= imgItems) {
      imgPos = 1;
    } else {
      imgPos++;
    }

    $('.slider li').hide(); //TO HIDE ALL THE OTHER SLIDES
    $('.slider li:nth-child(' + imgPos + ')').fadeIn(); // TO SHOW THE SLIDE SELECTED

  }

  function prevSlider() {
    if (imgPos <= 1) {
      imgPos = imgItems;
    } else {
      imgPos--;
    }

    $('.slider li').hide();
    $('.slider li:nth-child(' + imgPos + ')').fadeIn();
  }

});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

.slideshow {
  position: relative;
  width: 100%;
}

.slider ul,
li {
  width: 100%;
}

.slider li img {
  width: 100%;
}

.slider .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 10%;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}

.slider .caption h1 {
  font-family: 'robotoblack', sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  padding: 15px 0px;
  line-height: 1.3;
  letter-spacing: 0px;
}

.slider .caption p {
  font-family: 'robotoregular', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 10px 0 30px 0;
  padding: 0px 30px 10px 0;
  line-height: 1.6;
}

.slider .caption a {
  font-family: 'robotoregular', sans-serif;
  font-size: 16px;
  color: #fff;
  width: 120px;
  background-color: #5cadd3;
  border-bottom: 3px solid #318bb4;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.left,
.right {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 35px;
  z-index: 2;
  cursor: pointer;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="slideshow">
  <ul class="slider">
    <li>
      <img src="images/img1.jpg" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>: lorem ipsum <br> lorem ipsum</h1>
        <p>lorem ipsum lorem ipsum!</p>
        <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
    <li>
      <img src="images/img2.jpg" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>:lorem ipsum <br> lorem ipsum !</h1>
        <p>lorem ipsum lorem ipsum lorem ipsum !</p>
        <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
  </ul>

  <div class="left">
    <span class="fas fa-chevron-left"></span>
  </div>
  <div class="right">
    <span class="fas fa-chevron-right"></span>
  </div>
</div>

Answer 1

setInterval 和淡入淡出动画在旧版本的 jQuery 中似乎不能很好地协同工作。但是您的代码似乎适用于较新的版本。下面，我使用的是 2.1.1 版。

如需进一步引用，请参阅:
jQuery .fadeIn + window.setInterval = A Bad Combination
Animations should not be queued with setInterval or setTimeout
Is setInterval() and setTimeout() bad things to do in modern jQuery animations?

$(function() {

  var imgItems = $('.slider li').length;
  var imgPos = 1;

  $('.slider li').hide();
  $('.slider li:first').show();

  $('.right span').click(nextSlider);
  $('.left span').click(prevSlider);


  setInterval(function() {
    nextSlider();
  }, 1400);


  // FUNCTIONS =========================================================


  function nextSlider() {
    if (imgPos >= imgItems) {
      imgPos = 1;
    } else {
      imgPos++;
    }

    $('.slider li').hide();
    $('.slider li:nth-child(' + imgPos + ')').fadeIn(); 

  }

  function prevSlider() {
    if (imgPos <= 1) {
      imgPos = imgItems;
    } else {
      imgPos--;
    }

    $('.slider li').hide();
    $('.slider li:nth-child(' + imgPos + ')').fadeIn();
  }

});

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

.slideshow {
  position: relative;
  width: 100%;
}

.slider ul,
li {
  width: 100%;
}

.slider li img {
  width: 100%;
}

.slider .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 10%;
  color: #fff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}

.slider .caption h1 {
  font-family: 'robotoblack', sans-serif;
  font-size: 35px;
  font-weight: bold;
  color: #fff;
  padding: 15px 0px;
  line-height: 1.3;
  letter-spacing: 0px;
}

.slider .caption p {
  font-family: 'robotoregular', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 10px 0 30px 0;
  padding: 0px 30px 10px 0;
  line-height: 1.6;
}

.slider .caption a {
  font-family: 'robotoregular', sans-serif;
  font-size: 16px;
  color: #fff;
  width: 120px;
  background-color: #5cadd3;
  border-bottom: 3px solid #318bb4;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
}

.left,
.right {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 35px;
  z-index: 2;
  cursor: pointer;
}

.left {
  left: 10px;
}

.right {
  right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="slideshow">
  <ul class="slider">
    <li>
      <img src="//picsum.photos/200/300?image=50" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>: lorem ipsum <br> lorem ipsum</h2>
          <p>lorem ipsum lorem ipsum!</p>
          <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
    <li>
      <img src="//picsum.photos/200/300?image=42" />
      <section class="caption">
        <h1><span class="textblue">lorem ipsum</span>:lorem ipsum <br> lorem ipsum !</h1>
        <p>lorem ipsum lorem ipsum lorem ipsum !</p>
        <a href="#services">Plus d'Infos !</a>
      </section>
    </li>
  </ul>

  <div class="left">
    <span class="fas fa-chevron-left"></span>
  </div>
  <div class="right">
    <span class="fas fa-chevron-right"></span>
  </div>
</div>