jQuery幻灯片过渡“跳过”

Question

***编辑：这是jsfiddle：https://jsfiddle.net/lisa_yael/t5qgjo9L/1/

我的网站上有一个幻灯片放映，可以自动播放，但是也可以通过任一侧的箭头控制幻灯片放映，以手动转到不同的幻灯片。但是，每当我第一次播放幻灯片时（即，当我第一次进入网站时），幻灯片之间就会产生怪异的“跳过”效果，而不是正常的平滑过渡。我不知道怎么了。

这是我用于幻灯片显示的代码；预先感谢：

<script 
src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
</script>
<script>

var slideIndex = 1;
var t;

showSlides(slideIndex);

function plusSlides(n) {

  slideIndex = slideIndex + n;
  clearTimeout(t);
  showSlides(slideIndex);
  console.log(slideIndex);
}

function currentSlide(n) {

  showSlides(slideIndex = n);

}

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  if (n == undefined) {
    n = ++slideIndex;
  }

  if (n > slides.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slides.length
  }



  for (i = 0; i < slides.length; i++) {

    slides[i].style.display = "none";

  }

  slides[slideIndex - 1].style.display = "block";


  t = setTimeout(showSlides, 2000);

}
</script>