Javascript幻灯片演示如何使其干燥

我已经用Javascript创建了一个简单的自动/手动幻灯片，但我需要帮助使其更干燥

以下是我的Javascript代码：

let image = document.getElementById('slideImg');
const button = document.querySelectorAll('.btn');
const imageArray = ['Images/baby.jpg', 'Images/botez-leagan.jpg', 'Images/tata.jpg'];

let i = 0;
let time = 5000;

loadEventHandlers();
window.onload= autoSlide;


function loadEventHandlers(){
  button[0].addEventListener('click', changeImg);
  button[1].addEventListener('click', changeImg);
}


function autoSlide(){

  image.classList.add('animate');

  image.src = imageArray[i];
  if(i < imageArray.length - 1){
    i++;
    }else{
    i = 0;
    }
  console.log(image);

  setTimeout("autoSlide()", time);


  }


  function changeImg(){
    image.src = imageArray[i];
    image.classList.add('animate');

  if(i < imageArray.length - 1){
    i++;
    }else {
    i=0;
    }

let image=document.getElementById（'slideImg'）；
const button=document.queryselectoral（'.btn'）；
constImageArray=['Images/baby.jpg'、'Images/botez-leagan.jpg'、'Images/tata.jpg']；
设i=0；
时间=5000；
loadEventHandlers（）；
window.onload=自动滑动；
函数loadEventHandlers（）{
按钮[0]。addEventListener（'click'，changeImg）；
按钮[1]。addEventListener（'click'，changeImg）；
}
函数autoSlide（）{
image.classList.add（'animate'）；
image.src=imageArray[i]；
if（i

以及相关的HTML

   <div class="gallery">

  <div class="mySlides">
    <img src="" class="slide" id="slideImg">
  </div>



  <a class="prev btn" >&#10094;</a>
  <a class="next btn" >&#10095;</a>
</div>

❮
❯

我最初考虑将超时功能与click事件相结合，但是，我不知道如何检查类似的内容：“如果按钮已被单击，则更改图像”和“如果按钮未被单击，则等待X秒并更改图像”以及“如果按钮已单击，请等待x秒，如果按钮未单击，请更改图像”

我还希望在每次图像更改时重置动画，但我不确定是否可以在autoSlide（）函数中添加超时函数

任何帮助都将不胜感激

谢谢,，

---

Bogdan

代替

setTimeout

，尝试定义一个基于某个参数向前或向后移动的滑动函数。在页面加载时，您可以使用

setInterval

每隔X个时间使用forwards参数调用该函数，或者单击按钮，您可以使用

clearInterval

取消该操作计时器，然后根据需要使用向前或向后参数手动触发滑动功能。（抱歉，没有时间为您准备答案。）不要使用

setTimeout

，而是尝试定义一个基于某个参数向前或向后移动的滑动函数。在页面加载时，您可以使用

setInterval

每隔X个时间使用forwards参数调用该函数，或者在单击按钮时，您可以使用

clearInterval

取消计时器并然后根据需要使用forwards或backwards参数手动触发滑动功能。（抱歉，没有时间为您准备答案。）