将淡入淡出过渡应用于javascript中的幻灯片

Question

我知道已经讨论了这个主题，但是我不明白如何将这些建议应用到我的工作中。我有以下代码：

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("slideshow");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 7000); // Change image every 2 seconds
}

<div id="header">
  <img src="capa1.png" class="slideshow">
  <img src="capa2.png" class="slideshow">
  <img src="capa3.png" class="slideshow">
  <img src="capa4.png" class="slideshow">
  <img src="capa5.png" class="slideshow">
  <img src="capa6.png" class="slideshow">
</div>

如何对header div上的图像应用淡入过渡？

Answer 1

这是一个有效的示例，但是我不得不调整一些内容，因此请仔细看一下这个示例。

var slideIndex = 0;
carousel();
setInterval(carousel, 3000);

function carousel() {
  var i;
  var x = document.querySelectorAll('#header img');
  for (i = 0; i < x.length; i++) {
    x[i].classList.remove("active");
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1
  }
  x[slideIndex - 1].classList.add("active");
}

#header {
  height: 255px;
  position: relative;
}

#header img {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: absolute;
  height: 255px;
}

#header img.active {
  visibility: visible;
  opacity: 1;
}

<div id="header">
  <img src="https://images.pexels.com/photos/162971/potatoes-french-mourning-funny-162971.jpeg?auto=compress&cs=tinysrgb&h=350" class="active">
  <img src="https://images.pexels.com/photos/209620/pexels-photo-209620.jpeg?auto=compress&cs=tinysrgb&h=350">
  <img src="https://images.pexels.com/photos/321552/pexels-photo-321552.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<p>
  asd asd asd asd
</p>
</p>

请密切注意css样式，尤其是绝对位置和相对位置以及css过渡的使用。我也将其转换为使用setInteval而不是递归setTimeout。