JavaScript 幻灯片 - 淡入淡出效果

Question

我有一个 JavaScript 幻灯片，我想在图像更改时删除“闪光”效果，并添加交叉淡入淡出效果。我找到了很多解决方案，但没有任何效果我不知道为什么:-( ...

我在这里粘贴了我的代码： http://jsfiddle.net/nanoupi42/xu06jdb2/1/

HTML：

<div class="slideshow-container hidden__M__Device">

        <div class="mySlides fades">

          <img src="http://images7.alphacoders.com/338/338687.jpg" class="img-fluid" alt="">

        </div>

        <div class="mySlides fades">

          <img src="https://www.usine-digitale.fr/mediatheque/9/3/5/000729539/viveport-infinity.jpg" class="img-fluid" alt="">

        </div>

        <div class="mySlides fades">

          <img src="https://www.philosophytalk.org/sites/default/files/o-INFINITY-facebook.jpg" class="img-fluid" alt="">

        </div>

      </div>

      <div class="dots_container hidden__M__Device">

        <span class="dot" onclick="currentSlide(1)"></span>

        <span class="dot" onclick="currentSlide(2)"></span>

        <span class="dot" onclick="currentSlide(3)"></span>

      </div>

CSS：

.slideshow-container {
  max-width: 100%;
  width: 100%;
  position: absolute;
  height: 1082px;
  z-index: -1;
}

.mySlides{
  display: none;
}

.mySlides > img {
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  z-index: -1;
  /* top:-154px; */
}

.dots_container{
  position: absolute;
  margin-top: 230px;
  display: flex;
  flex-direction: column;
  margin-left: 81.5%;
}

.dot {
  position: relative;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  margin-top: 5px;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: rgba(255,255,255,0.5);
}

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

@-webkit-keyframes fades {
  from {opacity: .4}
  to {opacity: 1}
}

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

JavaScript：

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
setInterval(plusSlides, 2000, 1); // call plusSlider, with 1 as parameter

如您所见，当图片变化时，会有一种“闪光”效果。我想删除它并添加这样的交叉淡入淡出效果https://cobwwweb.com/simple-looping-crossfade-image-slideshow。你知道我该怎么做吗？

非常感谢。

南欧

Answer 1

查看 fades 类的 css 动画。 关键帧与opacity 一起使用，您可以将它们更改为与translateX 一起使用transform 属性。

@keyframes fades {
  from {transform: translateX(-100%)}
  to {transform: translateX(0%)}
}

如果您需要动画方面的帮助，请参阅 animate.css 或 ofc 每个有关 css 动画属性的文档。