在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

使用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 2

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

Answer 3

就像我在我的评论中提到的那样，我认为使用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); 
})();