JavaScript SlideShow -交叉衰落效应

Question

我有一个JavaScript SlideShow，当图像发生变化时，我想删除"flash“效应，然后添加交叉衰落效应。我已经找到了很多的解决方案，但是没有什么是有效的，我不知道为什么:-( .

我在这里粘贴了我的代码：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一起工作，您可以将它们更改为在transform属性上使用translateX。

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

如果您需要动画方面的帮助，可以使用animate.css或ofc所有关于css动画属性的文档。