javascript - Jquery 幻灯片中的图片断断续续且显示不正确

Question

我有一个包含 5 张图像的幻灯片，每隔几秒钟播放一次。它应该转到下一张图像，然后循环。

当前发生的情况是显示第一个图像，然后过渡到下一个图像。当下一个出现时，它会闪回第一张图像。然后它按照系列中应有的方式转到第三张图像，但又闪回到第一张图像。这一直持续到第五张图片。

但是一旦它再次循环到第一张图像(在完成所有五张图像之后)，一切都会正常工作。每幅图像停留 3 秒，然后继续前进，不会跳回第一幅图像或任何其他内容。

这是我正在使用的代码。

HTML:

<div id="slideshow">
   <div>
     <img src="Images/1.gif">
   </div>
   <div>
     <img src="Images/2.gif">
   </div>
   <div>
     <img src="Images/3.gif">
   </div>
   <div>
     <img src="Images/4.gif">
   </div>
   <div>
     <img src="Images/5.gif">
   </div>
</div>

CSS:

#slideshow { 
    clear: both;
    margin: 50px auto; 
    position: relative; 
    max-width: 960px; 
    height: 643px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

#slideshow img {
    max-width: 100%;    
}

JS:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(800)
    .next()
    .fadeIn(800)
    .end()
    .appendTo('#slideshow');
},  3000);

我正在整理的实际网站在这里，以便您可以看到它的实际效果:

schmelzerwedding.com

任何帮助使它不会像那样跳回来将不胜感激。谢谢!

Answer 1

就像我在评论中提到的那样，我认为使用 appendTo() 可能是罪魁祸首。我还认为，就性能而言，这并不是最好的做法。

这是一个简单地跟踪我们正在播放的幻灯片并增加数字的版本。

(function () {
  var slideshow = document.getElementById('slideshow');
  var slides = slideshow.getElementsByTagName('img');
  var currSlide = 0;
  var numSlides = slides.length;
  
  // Set first slide to active
  slides[currSlide].classList.add('active');
  
  setInterval(function () {
    slides[currSlide].classList.remove('active');
    currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
    slides[currSlide].classList.add('active');
  }, 2000);
})();

#slideshow {
  position: relative;
  width: 200px;
  height: 200px;
}

#slideshow img {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity .2s ease-out;
}

#slideshow img.active {
  opacity: 1;
}

<div id="slideshow">
<img src="http://placehold.it/199x199">
<img src="http://placehold.it/200x200">
<img src="http://placehold.it/201x201">
<img src="http://placehold.it/202x202">
</div>

编辑:如果您(由于某种原因)不想使用纯 JS，这里有 jQuery 中的相同代码:

(function () {
    var slideshow = $('#slideshow');
    var slides = slideshow.find('> *');
    var currSlide = 0;
    var numSlides = slides.length;

    slides.eq(currSlide).addClass('active');

    setInterval(function () {
        slides.eq(currSlide).removeClass('active');
        currSlide = (currSlide + 1) >= numSlides ? 0 : currSlide + 1;
        slides.eq(currSlide).addClass('active');
    }, 200);
})();