Javascript 在新位置重新启动设置间隔

我有一个“设置间隔”来更改幻灯片。用一个按钮来改变幻灯片。但一旦我点击按钮更改幻灯片，“设置间隔”将重置为+1

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

Lorem ipsum door sit amet，奉献精英，为劳工和大型企业提供临时服务
加布里埃尔，35岁

---

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

const
照片之间的延迟=2000，
numberOfPictures=4，
initialPicture=1，
image=document.getElementById（'slideshow'），
slideControl=document.getElementById（'slide-control'）；
让
超时ID；
函数moveHighlight（pictureIndex）{
常数
oldButton=slideControl.querySelector（'.highlight'），
newButton=slideControl.querySelector（`[data index=“${pictureIndex}”]`）；
如果（oldButton！==null）{
oldButton.classList.remove（'highlight'）；
}
如果（新按钮！==null）{
newButton.classList.add（'highlight'）；
}
}
函数更改图片（图片索引）{
//log（`Changing picture to index${pictureIndex}`）；
//更改图像
image.src=`http://lorempixel.com/320/200/cats/${pictureIndex}`；
移动突出显示（图片索引）；
//使用模运算符将4（图片数）返回到0并添加1，使范围变为1…图片数。
图片索引=（图片索引%numberOfPictures）+1；
//将超时设置为X ms，然后再次调用changeToPicture方法，这次使用新值pictureIndex。
timeoutId=setTimeout（（newIndex）=>changeToPicture（newIndex），图片之间的延迟[pictureIndex]）；
}
单击控件上的函数（事件）{
常数
按钮=event.target，
index=parseInt（button.getAttribute（'data-index'））；
//清除超时，否则我们将启动另一个超时循环。
clearTimeout（timeoutId）；
//更改为用户单击按钮的图片。
变更图片（索引）；
}
slideControl.addEventListener（'click'，onSlideControlClicked）；
更改图片（初始图片）
按钮{
字体：继承；
}
保险商实验室{
显示器：flex；
列表样式：无；
}
李+李{
左边距：1米；
}
.亮点{
盒影：0.01米#000；
}

跳转到幻灯片：


一,
二,
三,
四,
我的新代码工作：

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>


Lorem ipsum door sit amet，奉献精英，为劳工和大型企业提供临时服务
加布里埃尔，35岁


JS:

var persData=[{
src:“./assets/img/pers-1.png”，
评论：“Lorem ipsum dolor sit amet，Adipiscing Elite，sed do eiusmod Temporal Indidut ut Labor and dolore magna。”，
姓名：“加布里埃尔，35岁”
},
{
src:“./assets/img/pers-2.jpg”，
评论：“利奥·内克的休止符，埃吉斯塔·维塔斯·达皮布斯·阿梅特，拉齐尼亚·塞德·勒姆，阿利奎亚·奥迪奥的休止符，埃利芬德·塞德·莱克图斯的休止符。”，
姓名：“伯纳德，28岁”
},
{
src:“./assets/img/pers-3.jpg”，
评论：“梅塞纳·波苏尔·韦利特在苏西皮特·洛波尔蒂斯。南·卢克图斯·贾斯托·奎斯·阿利夸姆·莫莱斯蒂。休森迪斯坐在艾米特·布兰迪特·利奥的位子上。”，
姓名：“朱莉，22岁”
}
];
var intervalPers；
指数=1；
功能转换器（索引）{
var指数=指数+1；
var pers=个人数据[指数]；
$（“.confidence\uu content--pers.pers”）.fadeOut（1000，function（）{
$（this.css（“背景图像”、“url”（+pers.src+）））.fadeIn（1000）；
});
$（“.confidence\uu content--pers.comment”）.fadeOut（1000，function（）{
$（this）.text（pers.comment）.fadeIn（1000）；
});
$（“.confidence\uu content--pers.name”）.fadeOut（1000，function（）{
$（this）.text（pers.name）.fadeIn（1000）；
});
对于（变量i=1；变量i=2）{
指数=0；
}else if（索引<0）{
指数=2；
}
兑换商（指数）；
索引++；
}, 5000);
}
开始滑行（指数）；
功能停止滑块（索引）{
间隔时间（间隔时间）；
兑换商（指数）；
setTimeout（函数（）{
索引++；
开始滑行（指数）；
},5000);
}

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

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