JavaScript幻灯片显示不平滑

我一直在使用jQuery 3.1.1制作自己的JavaScript幻灯片。它工作正常，但由于某些原因，过渡动画并不平滑。当只有两张照片时，效果很好，但一旦我添加了第三张，效果就不好了

我做了这把小提琴，如果有人能提供一些见解，我将不胜感激

！函数（$）{
“严格使用”；
$.slideshow=函数（容器）{
设$container=$（container）；
让子项=$container.find（'.slide'）.length；
$container.find（'.slide'）。每个（函数（索引）{
设zIndex=210-指数；
设bg=$（this.data（'bg'）；
$（this.css（'background-image'，'url（'+bg+'））；
});
让设置={
"过渡":500,，
“延迟”：6000，
};
设currentSlide=0；
$.fn.showNext=函数（）{
让nextSlide=（（currentSlide+1）<子项）？（currentSlide+1）：0；
让$current=$container.find（'.slide:n个子项（'+（currentSlide+1）+'）；
让$next=$container.find（'.slide:n子项（+（nextSlide+1）+'）；
$current.animate({
“不透明度”：0
}，设置。转换）；
setTimeout（函数（）{
$current.css（'z-index'，200）；
$current.css（'opacity'，1）；
$next.css（'z-index'，210）；
}，设置。转换+100）；
console.log（currentSlide，nextSlide）；
currentSlide=（（currentSlide+1）<子项）？（currentSlide+1）：0；
setTimeout（函数（）{
$container.showNext（）；
}，设置。延迟）；
};
setTimeout（函数（）{
$container.showNext（）；
}，设置。延迟）；
};
}（jQuery）；
$.slideshow（'.slideshow'）
.slideshow包装器{
高度：100vh；
溢出：隐藏；
位置：相对位置；
宽度：100%；
}
.幻灯片放映{
身高：100%；
位置：相对位置；
宽度：100%；
}
.幻灯片{
背景位置：中心；
背景尺寸：封面；
身高：100%；
左：0；
溢出：隐藏；
位置：绝对位置；
排名：0；
宽度：100%；
}
主要问题就在这里

setTimeout(function() {
        $current.css('z-index', 200);
        $current.css('opacity', 1); // this should be $next.css('opacity', 1);
        $next.css('z-index', 210);
      }

您还应该尝试去掉3 setTimeout（），它们看起来是多余的。
可以使用setInteval（）更改图像。在动画的completion回调中更改css属性，就可以去掉另一个setTimeout（）

选中此项：


！函数（$）{
“严格使用”；
$.slideshow=函数（容器）{
设$container=$（container）；
让子项=$container.find（'.slide'）.length；
$container.find（'.slide'）。每个（函数（索引）{
设zIndex=210-指数；
设bg=$（this.data（'bg'）；
$（this.css（'background-image'，'url（'+bg+'））；
});
让设置={
"过渡":500,，
“延迟”：6000，
};
设currentSlide=0；
$.fn.showNext=函数（）{
让nextSlide=（（currentSlide+1）<子项）？（currentSlide+1）：0；
让$current=$container.find（'.slide:n个子项（'+（currentSlide+1）+'）；
让$next=$container.find（'.slide:n子项（+（nextSlide+1）+'）；
$current.animate({
“不透明度”：0
}，settings.transition，function（）{
$current.css（'z-index'，200）；
$next.css（'opacity'，1）；
$next.css（'z-index'，210）；
});
currentSlide=（（currentSlide+1）<子项）？（currentSlide+1）：0；
};
setInterval（函数（）{
$container.showNext（）；
}，设置。延迟）；
};
}（jQuery）；
$.slideshow（'.slideshow'）
.slideshow包装器{
高度：100vh；
溢出：隐藏；
位置：相对位置；
宽度：100%；
}
.幻灯片放映{
身高：100%；
位置：相对位置；
宽度：100%；
}
.幻灯片{
背景位置：中心；
背景尺寸：封面；
身高：100%；
左：0；
溢出：隐藏；
位置：绝对位置；
排名：0；
宽度：100%；
}
jQuery代码中存在多个问题。以下是我的发现：

它运行在一个竞争条件下，JavaScript正在运行
在此之前，HTML有时间加载。没有初始div
标记已加载到文档对象中。货柜部
长度为0。在JS运行之前，使用0ms加载的单个setTimeout将取消阻止&允许HTML加载
第三个图像（4.jpg）显示在第一个，而不是第一个图像（6.jpg）。代码中的z索引正在更改，但没有应用回图像
“当前”的不透明度设置为0，然后立即反弹到1。我认为您希望将“下一步”的不透明度更改为1，而不是将“当前”的不透明度从1更改为0，然后再更改为1
初始化转换开始时是平滑的，但随后重复的动画往往循环得更快&在“下一个”图像出现之前淡出到白色页面。用户可能会发现，震动会使动画以6秒的延迟开始，然后每幅图像的速度会提高1/2秒。后面的动画太快了
动画正在弹出，而不是消失。它也不使用交叉溶解，但我建议使用一个。我添加它是为了向您展示它是如何工作的
代码似乎没有被清理，这就是为什么您在console.log中遇到了编码问题&被迫使用$container来纠正它。容器变量作为（container）的参数传入后，不能用“let container=…”重新声明。当我通过传入一个“选择器”参数名来纠正这个错误时，我就可以删除容器变量上的$。这有助于区分哪些代码与jQuery绑定&哪些不绑定
有一个很大程度上依赖于使用setTimeout方法，但正如您可能已经知道的。。。这些仅运行1x，然后停止。对马
.slideshow-wrapper {
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slideshow {
  height: 100%;
  position: relative;
  width: 100%;
}

.slide {
  background-position: center;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0; /* <-- New --- */
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}

.slide:first-child { /* <-- New --- */
  opacity: 1;
}

!function($) {
   "use strict";

   $.slideshow = function(selector) {
        let container = $(selector);
        let children = container.find('.slide').length;

        container.find('.slide').each(function(index) {
          let zIndex = 210 - index;
          $(this).css('z-index', zIndex); // <-- This was missing, as it was loading the last image as the 1st image.
          let bg = $(this).data('bg');
          $(this).css('background-image', 'url(' + bg + ')');
        });

        let settings = {
          'delay': 2000
        };

        let currentSlide = 0;

        $.fn.showNext = function() {
          let nextSlide = ((currentSlide + 1) < children) ? (currentSlide + 1) : 0;
          let current = container.find('.slide:nth-child(' + (currentSlide + 1) + ')');
          let next = container.find('.slide:nth-child(' + (nextSlide + 1) + ')');

          next.animate({
            'opacity': 1,
            'z-index': 210
          }, settings.transition);

          // Creates the Cross-Dissolve, as 1 image "next" is fadding up from opacity 0 to 1, while current is fadding down from 1 to 0.
          current.animate({
             'opacity': 0,
             'z-index': 200
          }, settings.transition);
       };

       // Starts the animation loop.
       setInterval(function() {
          container.showNext();
          currentSlide = ((currentSlide + 1) < children) ? (currentSlide + 1) : 0;
       }, settings.delay);
   };
}(jQuery);

setTimeout(function() {
   $.slideshow('.slideshow');
}, 0); // Fixes the race condition, by allowing the HTML to load before the JS runs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
<div class="slideshow-wrapper">
  <div class="slideshow">
    <div class="slide" data-bg="https://s3.amazonaws.com/StartupStockPhotos/uploads/20160503/6.jpg"></div>
    <div class="slide" data-bg="https://s3.amazonaws.com/StartupStockPhotos/uploads/20160503/5.jpg"></div>
    <div class="slide" data-bg="https://s3.amazonaws.com/StartupStockPhotos/uploads/20160503/4.jpg"></div>
  </div>
</div>