Question

我正在尝试为我的网站创建一个幻灯片横幅，我的想法是使用z-index将其堆叠，然后使顶部的淡出以显示下面的一个，然后将其自身移至底部堆栈。

我不完全了解CSS淡入淡出规则的工作方式，似乎它们一次使堆栈中的所有图像淡入淡出，而不仅仅是顶部的一幅。是否有一种优雅的方法可以使衰落类遵循堆栈的顶部图像，以便仅在其顶部出现时才逐渐消失？

任何帮助将不胜感激...

expense_grp

year

var slidePosition = 0;
fadeSlides();


function fadeSlides() {
  var i;
  var slide = document.getElementsByClassName("mySlides");
  for (i = 0; i < slide.length; i++) {
    slide[i].style.zIndex = slide[i].style.zIndex + 1;
    slide[i].style.opacity = "1";
  }
  slidePosition++;
  if (slidePosition > slide.length) {
    slidePosition = 1
  }
  slide[slidePosition - 1].style.opacity = "0";
  slide[slidePosition - 1].style.zIndex = "0";
  setTimeout(fadeSlides, 3500);

}

Answer 1

只需使用transition，因为无需使用animation，因为您正在使用JS更改属性

var slidePosition = 0;
fadeSlides();


function fadeSlides() {
  var i;
  var slide = document.getElementsByClassName("mySlides");
  for (i = 0; i < slide.length; i++) {
    slide[i].style.zIndex = slide[i].style.zIndex + 1;
    slide[i].style.opacity = "1";
  }
  slidePosition++;
  if (slidePosition > slide.length) {
    slidePosition = 1
  }
  slide[slidePosition - 1].style.opacity = "0";
  slide[slidePosition - 1].style.zIndex = "0";
  setTimeout(fadeSlides, 3500);

}

.slideshow-container {
  width: 100%;
  position: relative;
}

.mySlides {
  opacity: 1;
  position: absolute;
}

.fade {
  transition: opacity 1s, z-index 0s 1s;
}

<div class="slideshow-container">

  <div class="mySlides fade" style="z-index: 5">
    <img src="https://i.imgur.com/h9HMwvD.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 4">
    <img src="https://i.imgur.com/inAYNo3.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 3">
    <img src="https://i.imgur.com/8VHulyg.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 2">
    <img src="https://i.imgur.com/wZzx8GU.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 1">
    <img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%">
  </div>

  <div class="mySlides fade" style="z-index: 0">
    <img src="https://i.imgur.com/yhuKaY8.png" style="width:100%">
  </div>

</div>

Answer 2

Temani Afif的答案将帮助您使用当前的方法使事情看起来更好，但是，正如其他人所评论的，更简单的答案是一次只切换一次一个幻灯片上的课程。

您可以使用CSS transition属性来简化此操作，而不必涉及@keyframes：为所有幻灯片提供过渡属性，然后将opacity与{ {1}}类。这样，当fade类从一张幻灯片更改为另一张幻灯片时，旧幻灯片将淡出，而新幻灯片将同时淡入。

您还可以简化工作，不必为每张幻灯片都单独使用fade。不用担心按照特定顺序将所有幻灯片堆叠在一起，只需担心将正确的幻灯片移到堆叠的顶部，不必担心下面的所有其他幻灯片，因为您看不到它们无论如何。

z-index

fadeSlides();


function fadeSlides() {
  var slide = document.getElementsByClassName("fade")[0];
  var nextSlide = slide.nextElementSibling;
  
  if (nextSlide) {
    nextSlide.classList.add('fade');
  } else {
    document.getElementsByClassName('mySlides')[0].classList.add('fade');
  }
  slide.classList.remove('fade');

  setTimeout(fadeSlides, 3500);
}

.slideshow-container {
  width: 100%;
  position: relative;
}

.mySlides {
  opacity: 0;
  position: absolute;
  transition: opacity 1000ms ease;
}

.mySlides.fade {
  opacity: 1;
  z-index: 1;
}

CSS淡入延迟？

2 个答案: