幻灯片无法正常显示javascript

Question

我在幻灯片播放时遇到问题。目前，第一个图像循环一直闪烁回到'image3'，但一旦幻灯片已经超过第一个循环，它似乎正常工作。我需要幻灯片才能第一次正确运行。任何帮助，将不胜感激！这里是我的相关代码：

HTML

<div id="slideshow"> 
    <div> 
     <img src="img/image1.jpg" alt="Image1" class="scale-with-grid" width="100%" height="100%" /> 
    </div> 
    <div> 
     <img src="img/image2.jpg" alt="Image2" class="scale-with-grid" width="100%" height="100%" /> 
    </div> 
    <div> 
     <img src="img/image3.jpg" alt="Image2" class="scale-with-grid" width="100%" height="100%" /> 
    </div> 
</div> 

CSS

#slideshow { 
    margin: auto; 
    position: relative; 
    width: 637px; 
    height: 396px; 
    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; 
} 

的Javascript

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

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

谢谢！

Answer 1

看看一些在我的网站我的源代码：

<div id="mySwipe" style="max-width: 500px; margin: 0px auto; visibility: visible;" class="swipe"> 

<div class="swipe-wrap" style="width: 3000px;"> 



     <div data-index="0" style="width: 500px; left: 0px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(-500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/oFnHbEQ.png" style="width:" "100%"=""></div> 

     <div data-index="1" style="width: 500px; left: -500px; transition: 300ms; -webkit-transition: 300ms; -webkit-transform: translate(-500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/qFUDwaC.png" style="width:" "100%"=""></div> 

     <div data-index="2" style="width: 500px; left: -1000px; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate(-500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/XKxbTCK.png" style="width:" "100%"=""></div> 

     <div data-index="3" style="width: 500px; left: -1500px; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate(0px, 0px) translateZ(0px);"><img src="http://i.imgur.com/a1YKHeR.png" style="width:" "100%"=""></div> 

     <div data-index="4" style="width: 500px; left: -2000px; -webkit-transition: 0ms; transition: 0ms; -webkit-transform: translate(500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/YzLZS1Y.png" style="width:" "100%"=""></div> 

     <div data-index="5" style="width: 500px; left: -2500px; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate(500px, 0px) translateZ(0px);"><img src="http://i.imgur.com/F05kEd7.png" style="width:" "100%"=""></div> 

    </div> 

="text-align:center;padding-top:20px;"> 


    <button onclick="mySwipe.prev()">prev</button> 

    <button onclick="mySwipe.next()">next</button> 


</div> 

<script async="" src="//www.google-analytics.com/analytics.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script src="swipe.js"></script> 

<script> 

var elem = document.getElementById('mySwipe'); 

window.mySwipe = Swipe(elem, { 

    startSlide: 0, 

    auto: 2000, 

    continuous: true, 

    disableScroll: true, 

    stopPropagation: true, 

    callback: function(index, element) {}, 

    transitionEnd: function(index, element) {} 

});