Question

我试图每隔几秒钟在div中切换一次图像当前的代码有效，但有两件事我想改变，我需要你的帮助：

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

感谢阅读，希望你能帮助我。

这是我到目前为止所得到的：

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/

延迟后淡出图像

1 个答案: