javascript - 幻灯片无法正常运行 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) {}

});