Question

我使用Jquery来滑动图像。但是图像滑动但存在一些问题。我有4张图片。当页面加载时，它首先显示第4个图像＆amp;当图像滑动第四张图像停留在屏幕上时，滑动图像就会闪烁在那里。一旦所有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-->

jquery的

$("#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

＆＃13;

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

＆＃13;

.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
}

＆＃13;

<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-->

＆＃13;

Jquery图像滑块在onLoad上无法正常工作

1 个答案: