javascript - 带有缩放过渡的图像幻灯片

Question

我正在尝试创建具有淡入、缩放效果然后淡出的图像幻灯片。

它最初似乎可以工作，但是在我让它在后台运行一段时间后，它变得混乱并且不同步（并且多个元素display: block同时获得元素样式）。

这是代码。我正在使用 CSS 来实现缩放过渡效果。

jsfiddle - https://jsfiddle.net/kcyhcwh0/

HTML

<div id="slideshow-zoom">
  <div class="slideshow-zoom-slide">
    <div class="slideshow-zoom-image" style="background-image: url(https://i.imgur.com/RLP60uQ.jpg)"></div>
  </div>
  <div class="slideshow-zoom-slide">
    <div class="slideshow-zoom-image" style="background-image: url(https://i.imgur.com/HA4SI3J.jpg)"></div>
  </div>
  <div class="slideshow-zoom-slide">
    <div class="slideshow-zoom-image" style="background-image: url(https://i.imgur.com/yWNrSmE.jpg)"></div>
  </div>
  <div class="slideshow-zoom-slide">
    <div class="slideshow-zoom-image" style="background-image: url(https://i.imgur.com/kP5wJ1u.jpg)"></div>
  </div>
</div>

SASS

html {
  height: 100vh;
  width: 100vw;
}
body {
  position: relative;
  height: 100%;
  width: 100%;
}


#slideshow-zoom {
  background-color: #232323;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .slideshow-zoom-slide {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(1);
    -webkit-transform: scale(1);
    width: 100%;
    height: 100%;

    &.active {
      transition: all 5s;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      }

    .slideshow-zoom-image {
      display: none;
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;

    }
    &:first-child .slideshow-zoom-image {
      display: block;
    }
  }
}

JS

$(function(){

  // vars
  var $ssSlides = $('.slideshow-zoom-slide');
  var $ssImages = $('.slideshow-zoom-image');
  var ssSlideCount = $ssSlides.length;

  var i = 0;
  var ssSlide = 1;
  setInterval( function () {

    if (ssSlide > ssSlideCount) {
      ssSlide = 1;
    }

    var $ssSlide = $ssSlides.eq(ssSlide-1);
    var $ssImage = $ssImages.eq(ssSlide-1);

    if (i > 0) {
      $ssImages.hide();
    }

    $ssSlides.removeClass('active');
    $ssSlide.addClass('active');

    $ssImage.fadeIn(150, "linear").delay(4500).fadeOut(350, "linear");

    ssSlide++; i++;

  }, 5000);

});

关于出了什么问题的任何想法？还是实现相同目标的更好方法？谢谢

标签： javascriptjquery