logo标签列表

CSS淡入延迟？

javascriptcssslideshowfade
3
我想为我的网站创建一个幻灯片横幅，我的想法是使用 z-index 堆叠它们，然后使位于顶部的幻灯片淡出以显示其下面的幻灯片，然后将自己移动到堆栈底部。
我不完全理解 CSS 淡入淡出规则的工作原理，它们似乎会同时淡化堆栈中的所有图像，而不仅仅是顶部的图像。是否有一种优雅的方式使淡入淡出类只跟随堆栈顶部的图片，这样它们只在顶部时才淡出？
任何帮助都将不胜感激... 

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 {
  animation: fade 1s infinite;
}

@keyframes fade {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
<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>

这是交集！ - zer00ne
1
你可以尝试从所有图像中删除淡入淡出类，然后仅将其应用于当前正在淡化的图像。 - mlibby
1
淡入淡出类将应用于其附加的任何元素。 - John Ruddell
2个回答
4

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

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>

非常感谢！我知道一定有一个简单的解决方案，但我还在学习，所以自己无法完全理解。干杯！ - clovehitch
2

Temani Afif的回答可以帮助您改进当前的方法，但更简单的答案是，像其他人评论的那样，只需逐个切换幻灯片上的一个类。

您可以使用CSS transition属性来更简单地完成此操作，无需涉及@keyframes：为所有幻灯片设置过渡属性，然后使用fade类切换opacity。这样，当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;
}
<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="https://i.imgur.com/h9HMwvD.png" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="https://i.imgur.com/inAYNo3.png" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="https://i.imgur.com/8VHulyg.png" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="https://i.imgur.com/wZzx8GU.png" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="https://i.imgur.com/ZPO4z3V.png" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="https://i.imgur.com/yhuKaY8.png" style="width:100%">
  </div>
</div>

感谢您的帮助。我已经更新了代码，现在它完美地工作了。在“var slide = document.getElementsByClassName（“fade”）[0];”中，[0]是什么意思？它只是调用该节点中的第0个位置吗？由于代码正在开关“fade”类，因此它是否可以在不引用特定实例的情况下调用它？另外，我不完全理解“if（nextSlide）”语句。如果没有其他条件，它到底在比较什么。它存在的事实是否暗示了某种条件？ - clovehitch
1
@user580248，document.getElementsByClassName 返回一个数组，其中包含与传递的选择器匹配的所有元素（请注意，是元素，复数形式）。我们必须挑选出要添加类的数组中的哪个元素。但是我们假设页面上只有一个元素实际上具有 fade 类，这意味着问题中的元素始终是具有索引 0 的数组中的元素。if (nextSlide) ... 部分检查是否存在具有 fade 类的幻灯片的 nextElementSibling - 换句话说，我们是否在集合的最后一张幻灯片上。 - cjl750
1
@user580248，基本上我们的意思是，如果在具有fade类的幻灯片之后还有另一张幻灯片，则将下一张幻灯片赋予fade类，否则将第一张幻灯片赋予fade类。（然后我们立即从旧幻灯片中删除fade类。） - cjl750
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接