Jquery 图像 slider 在加载时无法正常工作

Question

我已经使用 Jquery 来滑动图像。但是图像滑动但存在一些问题。我有4张图片。当页面加载时，它首先显示第 4 个图像，当图像滑动时，第 4 个图像停留在屏幕上，滑动图像只是在那里闪烁。一旦所有 4 张图像都滑动，然后从第二轮开始，它们都可以正常工作。这是链接 click .请查看此链接以了解确切问题..

html

<div class="main-banner">
  <div id="slideshow">
    <div class="slideImg">
      <img src="images/Gift-a-spa.jpg" />
    </div>

    <div class="slideImg">
      <img src="images/Gift-A-Shopping.jpg" />
    </div>

    <div class="slideImg">
      <img src="images/Gift-a-Skill-Learn.jpg" />
    </div>

    <div class="slideImg">
      <img src="images/Indoor-Sports.jpg" />
    </div>
  </div>
</div><!--main-banner-ends-->

j查询

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

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

CSS

.main-banner {
  background: #444;
  background-size: cover;
  width: 100%;
  height:400px;
  position: relative;
}

#slideshow { 
  margin: 0 auto; 
  position: relative; 
  width:100%;
  height:auto;
}

#slideshow > .slideImg { 
  position: absolute; 
}

#slideshow img{
  width:100%;
  min-height:300px;
  height:400px
}

Answer 1

没问题。当我检查时，第一张图片首先显示。参见 FIDDLE

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

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

.main-banner {
  background: #444;
  background-size: cover;
  width: 100%;
  height:400px;
  position: relative;
}

#slideshow { 
  margin: 0 auto; 
  position: relative; 
  width:100%;
  height:auto;
}

#slideshow > .slideImg { 
  position: absolute;
  width: 100%;
}

#slideshow img{
  width:100%;
  min-height:300px;
  height:400px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main-banner">
  <div id="slideshow">
    <div class="slideImg">
      <img src="http://cdn3.aukera.es/blog/imagenes/google-tag-manager-for-dummies.png" />
    </div>

    <div class="slideImg">
      <img src="http://www.europeanprospects.org/sites/default/files/styles/editorial/public/image_188537642667430843.jpg?itok=zE3T4v9G" />
    </div>

    <div class="slideImg">
      <img src="http://www.spodestorage.co.za/wp-content/uploads/2014/04/dummy.png" />
    </div>

    <div class="slideImg">
      <img src="http://purvknowledge.com/userfiles/galleries/o_8-390.jpg" />
    </div>
  </div>
</div><!--main-banner-ends-->