重新启动setInterval一个新位置

Question

我有一个" setInterval"来更改幻灯片。使用按钮更改幻灯片。但是，一旦我单击按钮更改幻灯片，" setInterval"将重置为 1的位置。

我希望它重新启动我的 1按钮

https://jsfiddle.net/8S6R3QAY/

<section class="testimony">
<div class="testimony__content">
  <article class="testimony__content--pers">
    <div class="pers"></div>
    <p class="comment"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
    <p class="name">Gabrielle, 35 ans</p>
  </article>
  <aside class="aside hide-xs">
    <div class="bulletOrange pers1" onclick="stopSliderPers(0)"></div>
    <div class="bulletGrey pers2" onclick="stopSliderPers(1)"></div>
    <div class="bulletGrey pers3" onclick="stopSliderPers(2)"></div>
  </aside>
</div>

Answer 1

我已经采用了我的先前答案，以添加图像滑块以添加按钮，使您可以跳到特定的幻灯片，并从那里继续幻灯片。也许它有一些可以在解决方案中重复使用的代码。

const
  delayBetweenPictures = 2000,
  numberOfPictures = 4,
  initialPicture = 1,
  image = document.getElementById('slideshow'),
  slideControl = document.getElementById('slide-control');
  
let 
  timeoutId;
  
function moveHighlight(pictureIndex) {
  const 
    oldButton = slideControl.querySelector('.highlight'),
    newButton = slideControl.querySelector(`[data-index="${pictureIndex}"]`);
    
  if (oldButton !== null) {
    oldButton.classList.remove('highlight');
  }
  
  if (newButton !== null) {
    newButton.classList.add('highlight');
  }
}
  
function changeToPicture(pictureIndex) {
  // console.log(`Changing picture to index ${pictureIndex}`);
  // Change the image
  image.src = `http://lorempixel.com/320/200/cats/${pictureIndex}`;
  moveHighlight(pictureIndex);
  
  // Use a modulo operator to turn 4 (number of pictures) back to 0 and add 1 so the range becomes 1...number of pictures.
  pictureIndex = (pictureIndex % numberOfPictures) + 1;
  
  // Set a timeout of X ms after which the changeToPicture method is called again, this time with the new value of pictureIndex.
  timeoutId = setTimeout((newIndex) => changeToPicture(newIndex), delayBetweenPictures, [pictureIndex]);
}
function onSlideControlClicked(event) {
  const
    button = event.target,
    index = parseInt(button.getAttribute('data-index'));
    
  // Clear the timeout or else we will be starting another timeout loop.
  clearTimeout(timeoutId);
  // Change to the picture for which the user clicked the button.
  changeToPicture(index);
}
slideControl.addEventListener('click', onSlideControlClicked);
changeToPicture(initialPicture);

button {
  font: inherit;
}
ul {
  display: flex;
  list-style:none;
}
li + li {
  margin-left: 1em;
}
.highlight {
  box-shadow: 0 0 1em #000;
}

<img id="slideshow">
<p>Jump to slide:</p>
<ul id="slide-control">
  <li><button type="button" data-index="1">1</button></li>
  <li><button type="button" data-index="2">2</button></li>
  <li><button type="button" data-index="3">3</button></li>
  <li><button type="button" data-index="4">4</button></li>
</ul>

Answer 2

我的新代码工作：

html：

 <section class="testimony">
    <div class="testimony__content">
      <article class="testimony__content--pers">
        <div class="pers"></div>
        <p class="comment"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </p>
        <p class="name">Gabrielle, 35 ans</p>
      </article>
      <aside class="aside hide-xs">
        <div class="bulletOrange pers1" onclick="stopSliderPers(0)"></div>
        <div class="bulletGrey pers2" onclick="stopSliderPers(1)"></div>
        <div class="bulletGrey pers3" onclick="stopSliderPers(2)"></div>
      </aside>
    </div>
  </section>

JS：

var persData = [{
    src: "./assets/img/pers-1.png",
    comment: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. ",
    name: "Gabrielle, 35 ans"
  },
  {
    src: "./assets/img/pers-2.jpg",
    comment: "Suspendisse leo neque, egestas vitae dapibus sit amet, lacinia sed lorem. Aliquam quam odio, eleifend sed lectus. ",
    name: "Bernard, 28 ans"
  },
  {
    src: "./assets/img/pers-3.jpg",
    comment: "Maecenas posuere velit in suscipit lobortis. Nam luctus justo quis aliquam molestie. Suspendisse sit amet blandit leo. ",
    name: "Julie, 22 ans"
  }
];

var intervalPers;
index = 1;
function changePers(index) {
  var indexUse = index + 1;
  var pers = persData[index];

  $(".testimony__content--pers .pers").fadeOut(1000, function() {
    $(this).css("background-image", "url(" + pers.src + ")").fadeIn(1000);
  });
  $(".testimony__content--pers .comment").fadeOut(1000, function() {
    $(this).text(pers.comment).fadeIn(1000);
  });
  $(".testimony__content--pers .name").fadeOut(1000, function() {
    $(this).text(pers.name).fadeIn(1000);
  });
  for (var i = 1; i <= 3; i++) {
    if (i === indexUse) {
      $(".testimony .aside .pers" + i).removeClass("bulletGrey");
      $(".testimony .aside .pers" + i).addClass("bulletOrange");
    } else {
      $(".testimony .aside .pers" + i).removeClass("bulletOrange");
      $(".testimony .aside .pers" + i).addClass("bulletGrey");
    }
  }
}
function startSliderPers(index) {
  intervalPers = setInterval(function(){
    if (index > 2) {
      index = 0;
    } else if(index < 0){
      index = 2;
    }
    changePers(index);
    index++;
  }, 5000);
}
startSliderPers(index);
function stopSliderPers(index) {
  clearInterval(intervalPers);
  changePers(index);
  setTimeout(function(){
    index++;
      startSliderPers(index);
  },5000);
}