Question

我有一张图片列表

<img src="test.png" /> <img src="test.png" /> <img src="test.png" />

我想在每张图像之间淡入淡出。每次淡入应该花费三秒钟。图片数量未预设-可能是3或10或30

如何使用CSS / HTML做到这一点？

谢谢。

这是我尝试过的：

` .canvas-section-glideshow> img { 位置：绝对；顶部：0px；左：0px；宽度：100％; 高度：500像素；颜色：透明；不透明度：0； z索引：0； -webkit-backface-visibility：隐藏；动画：imageAnimation 30s线性无限0s； }

.canvas-section-glideshow > img:nth-child(2)  {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.canvas-section-glideshow > img:nth-child(3) {
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}
.canvas-section-glideshow > img:nth-child(4) {
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}
.canvas-section-glideshow > img:nth-child(5) {
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}`

Answer 1

我认为有些东西与您在W3学校中寻找的东西相似。我不太确定您是否只能使用html和css，但是我知道可以使用一些JS。

以下是简化版本：http://jsfiddle.net/m2ks65h9/

* {
  box-sizing: border-box;
}

body {
  font-family: Verdana, sans-serif;
}

.mySlides {
  display: none;
}

img {
  vertical-align: middle;
}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

    <div class="slideshow-container">

  <div class="mySlides fade">
    <img src="img_nature_wide.jpg" alt="img1" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img_snow_wide.jpg" alt="img2" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img_mountains_wide.jpg" alt="img3" style="width:100%">
  </div>

</div>

    var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 2000); // Change image every 2 seconds
}

在无限数量的图像之间淡入淡出

1 个答案: