需要创建可单击的&；使用JavaScript进行自动幻灯片放映

我希望创建一个幻灯片，用户可以在其中单击下一张幻灯片，并且如果没有

单击

，幻灯片将自动移动到下一张幻灯片

我已经创建了下面的代码，如果在5秒钟内没有点击，它会自动进入下一张幻灯片，没有问题，但是问题是，当点击“上一张下一张”按钮时，幻灯片会在不到一秒钟的时间内开始随机自动运行

我曾在网上寻找解决方案，但没有明确的答案：（

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n==未定义）{
n=++滑动索引
}
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

.mySlides{
显示：无；
}
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-120px；
左侧填充：10px；
右键：px；
垫底：10px；
颜色：#A371D1；
字体大小：粗体；
字体大小：60px；
过渡：0.5s缓解；
边界半径：0 15px 15px 0；
}
.下一个{
右：0px；
边界半径：15px 0px 0px 15px；
}
.prev:悬停，
.下一步：悬停{
背景色：白色；
}

&伊萨库；
&rsaquo；

当用户与按钮交互时，需要清除超时。如果不清除超时，它将自动运行，而不考虑人与人之间的交互，并且会弄乱幻灯片索引

对于任何按钮，您的原始代码都无法正常工作，因为您的时间将在5秒后开始触发，并且由于您从未清除它们，因此它将在您单击按钮时触发相同的次数

var slideIndex=1；
变量t；
放映幻灯片（幻灯片索引）；
函数plusSlides（n）{
slideIndex=slideIndex+n；
清除超时（t）；
放映幻灯片（幻灯片索引）；
console.log（slideIndex）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n==未定义）{
n=++滑动索引；
}
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

当用户与按钮交互时，需要清除超时。如果不清除超时，它将自动运行，而不考虑人与人之间的交互，并且会弄乱幻灯片索引

对于任何按钮，您的原始代码都无法正常工作，因为您的时间将在5秒后开始触发，并且由于您从未清除它们，因此它将在您单击按钮时触发相同的次数

var slideIndex=1；
变量t；
放映幻灯片（幻灯片索引）；
函数plusSlides（n）{
slideIndex=slideIndex+n；
清除超时（t）；
放映幻灯片（幻灯片索引）；
console.log（slideIndex）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n==未定义）{
n=++滑动索引；
}
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

Post the html，jshtml中似乎没有以前的幻灯片功能现在已经Posted timeout正在运行，单击occurs。现有超时未清除，创建了另一个超时，现在有2个超时正在运行。再次单击-3个超时。使用clearTimeout删除现有的，然后再创建一个新的。Post the html，t这里似乎没有jshtml中的上一个幻灯片函数现在已被postedTimeout运行，单击发生。现有超时未清除，创建了另一个超时，现在有2个超时正在运行。另一个单击-3超时。使用clearTimeout在创建新超时之前删除现有超时。

var slideIndex = 1;
var t;

showSlides(slideIndex);

function plusSlides(n) {    
  slideIndex = slideIndex + n;
  clearTimeout(t);
  showSlides(slideIndex);
  console.log(slideIndex);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {

  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n == undefined) {
    n = ++slideIndex;
  }

  if (n > slides.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slides.length
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
  t = setTimeout(showSlides, 5000);
}