如何使这个手动和自动？

Question

我有这个代码，它基本上改变了用户屏幕上的文本和图像。我想通过单击事件手动执行此操作。但我不能，有人可以帮我吗？请let i = 0;let img = 0;let images = [  '...',  '...',  '...',  '...',  '...',  '...'];let textArrayImg = [  "Moda",  "Beleza",  "Comportamento",  "Decoração",  "Entretenimento",  "Bem-Estar"];let textImg = document.querySelector('.textImg');let btnPrev = document.querySelector('.btnPrev');let btnNext = document.querySelector('.btnNext');function changeImg(){  document.querySelector('.slide').src = images[img];  textImg.textContent = textArrayImg[i];  if(img < textArrayImg.length - 1){    img++;  }else {    img = 0;  }  if(i < images.length - 1){    i++;  }else {    i = 0;  }  setTimeout(changeImg, 3000);}changeImg();btnPrev.addEventListener('click', () => {});btnNext.addEventListener('click', () => {});我已经尝试了一些方法，但我想这样做，因为它让我更容易

Answer 1

让我们看看这段代码，它基本上每三秒调用一次img，并在 3 秒后自动增加 , 的计数

function changeImg(){

  document.querySelector('.slide').src = images[img];

  textImg.textContent = textArrayImg[i];

  if(img < textArrayImg.length - 1){

    img++;

  }else {

    img = 0;

  }

  if(i < images.length - 1){

    i++;

  }else {

    i = 0;

  }

  setTimeout(changeImg, 3000);

}

现在这有点像你的问题，因为它并没有真正定义它应该如何改变，所以你可以向它添加一个变量，它表明它需要如何改变img计数

function changeImg( inc )

然后改变img正在改变的地方，添加inc到它

现在，如果您使用上一个按钮，它可能会出现低于 0 的问题，因此，您现在也必须处理这种情况，例如

img += inc;

if (img >= textArrayImg.length) {

  img = 0;

} else if (img < 0) {

  img = textArrayImg.length - 1;

}

但是，您仍然必须在短时间内处理 changeImg 的自动调用事件（您不想调用两次），因此我们应该在手动更改某些内容时重置计时器

if (timer) {

  clearTimeout( timer );

}

timer = setTimeout( changeImg, 3000 ); // don't forget to declare timer where you have img and stuff

但是，现在我们有点想念 changeImg 中的参数，我们可能不希望它用 -1 或手动 +1 自动调用，因此将其更改为

setTimeout( function() { changeImg( 1 ) }, 3000 );

并确保您的初始呼叫然后也将其更改为

changeImg( 1 );

这是在函数之外

您的事件处理程序现在可以使用此功能

btnPrev.addEventListener('click', () => {

  changeImg( -1 );

});

btnNext.addEventListener('click', () => {

  changeImg( 1 );

});

请注意，在您中，changeImg您不需要两者img和i作为计数器（我假设它们彼此之间有些联系，因此它们必须引用相同的索引？）

所以最后，我想你会有这个

// at the declaration part

let timer;

// changes to the function

function changeImg( inc ){

  img+=inc;

  if (img < 0) {

    img = textArrayImg.length - 1;

  } else if (img >= textArrayImg.length) {

    img = 0;

  }

  document.querySelector('.slide').src = images[img];

  textImg.textContent = textArrayImg[img];

  if (timer) {

    clearTimeout( timer );

  }

  timer = setTimeout(() => changeImg(1), 3000);

}

// initial call

changeImg(0); // keep it as 0 to start with so it automatically sets the initial items there