JavaScript幻灯片-交叉淡入淡出效果

我有一个JavaScript幻灯片，我想删除图像更改时的“闪光”效果，并添加交叉淡入淡出效果。我已经找到了很多解决方案，但都不管用我不知道为什么：-（

我已将代码粘贴到此处：

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>

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

var slideIndex=1；
放映幻灯片（幻灯片索引）；
//下一个/上一个控件
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
//缩略图图像控件
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

正如你们所看到的，当图片改变时，会有一种“闪光”效果。我想删除它，然后像这样添加交叉淡入效果。你们知道我该怎么做吗

非常感谢

---

Nanou

查看类

淡入淡出的css动画。
关键帧使用
不透明度
，您可以在
transform
属性中将其更改为使用
translateX

@关键帧淡入淡出{
来自{transform:translateX（-100%）}
到{transform:translateX（0%）}
}

如果您需要动画方面的帮助，这里有或ofc关于css动画属性的所有文档。
非常感谢！我找到了一个解决方案，可以用您的代码添加一个好的转换：-）
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