javascript - 延迟后淡化图像

Question

我正在尝试每隔几秒切换一次 div 中的图像
当前的代码可以工作，但是有两件事我想改变，我需要你的帮助:

1. div 调整为当前显示在其中的图像，我希望它始终使用较大图像的大小
2. 我想在图像之间淡入淡出，而不仅仅是切换

感谢阅读，希望对您有所帮助。

这是我到目前为止得到的:

var imgIndex = 0;
setInterval(function() {
  images[imgIndex].style.display = "none";
  imgIndex++;
  if (imgIndex >= images.length) {
    imgIndex = 0;
  }
  images[imgIndex].style.display = "block";
}, 5000);

.imageDisplay {
  display: inline-block;
  width: 100%;
  background-Color: white;
  color: black;
  border-radius: 5%;
  margin: 2px;
  padding: 1px;
  opacity: 0.5;
  transition-duration: 0.5s;
}

.imageDisplay:hover {
  opacity: 1;
}

.Image {
  width: 99%;
  height: auto;
  margin: 1px;
  padding: 1px;
  border-radius: 5%;
  cursor: pointer;
  display: none;
}

<div class="imageDisplay">
  <p>Description</p>
  <img class="Image"></img>
  <img class="Image"></img>
</div>

Answer 1

首先你可以将 div 设置为等于大图像的大小，然后使用:

object-fit: cover;
object-position:center;

至于切换你可以使用:

transition: opacity .3s linear;

在此处阅读有关如何准确实现转换的信息。我的建议是将它们全部堆叠起来，每隔几秒将它们一个接一个地淡化。

https://www.w3schools.com/css/css3_transitions.asp

http://css3.bradshawenterprises.com/cfimg/