首页 文章

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

提问于
浏览 次
0

我有一个图像列表

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

我想在每张图片之间褪色 . 每次淡入淡出应该花费三秒钟 . 图像数量未预先设定 - 可能有3个或10个或30个

我怎么能用css / html做到这一点？

谢谢 .

这是我尝试过的：

`.canvas-section-glideshow> img {position：absolute;顶部：0px;左：0px;宽度：100％;身高：500px;颜色：透明;不透明度：0; z-index：0; -webkit-backface-visibility：hidden;动画：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;
}`
jquery html css

1 回答

  • 0

    我认为有些类似于你在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
}
    回复于

相关问题