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);
})();

Answer 2

使用 jQuery：

//Just for demo - takes a few secs to load the images
setTimeout(function(){
  $('#ld').hide();
},500);


var cnt = 0;
$("#slideshow > div:gt(0)").hide();
setTimeout(showSlide, 2000);

function showSlide() {
  cnt++;
  cnt = (cnt>3)?0:cnt;
  $("#slideshow > div").fadeOut();
  $("#slideshow > div:eq("+cnt+")").fadeIn();
  setTimeout(showSlide, 2000);
}

#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%;}

/* For Demo Only */
#ld{position:absolute;top:10%;left:20%;font-size:5rem;text-shadow:5px;z-index:2;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
  <div><img src="http://placekitten.com/550/200"></div>
  <div><img src="http://placekitten.com/548/200"></div>
  <div><img src="http://placekitten.com/550/202"></div>
  <div><img src="http://placekitten.com/548/202"></div>
</div>
<div id="ld">Loading . . . </div>

Answer 3

Boostrap 无法立即获取 jQuery，请尝试更改它们在头部调用的顺序。