显示一个元素5秒钟，然后隐藏并显示下一个元素

Question

到目前为止，这是我尝试过的方法，但是它只是一次显示所有元素：i1 = document.getElementById('img_1');i2 = document.getElementById('img_2');i3 = document.getElementById('img_3');i4 = document.getElementById('img_4');i5 = document.getElementById('img_5');myarr = [i1,i2,i3,i4,i5];    for (i=0; i<myarr.length;i++) {         $(myarr[i]).show().delay(5000).fadeOut();    } 

Answer 1

我认为您正在尝试实现无止境的循环。

我认为您应该在这种情况下使用间隔，并对元素进行fadeOut / fadeIn。

i1 = document.getElementById('img_1');

i2 = document.getElementById('img_2');

i3 = document.getElementById('img_3');

i4 = document.getElementById('img_4');

i5 = document.getElementById('img_5');

let myarr = [i1, i2, i3, i4, i5];

let active = 1;

setInterval(() => {

  $(myarr[active - 1]).fadeOut(500)

  if (active >= myarr.length) {

    active = 0

  }

  setTimeout(() => {

    $(myarr[active]).fadeIn(500);

    active = active + 1;

  }, 500)

}, 5000)

这样做是每5秒更新一次元素到下一个元素，如果到达末尾，则将其重置为零。