Question

我不知道这段代码有什么问题，滑动横幅不起作用。

 <div id="wrapper-banner">
            <div class="alive"><a href="#"><img src="pic1.jpg"></a></div>
            <div><a href="#"><img src="pic2.jpg"></a></div>
            <div><a href="#"><img src="pic3.jpg"></a></div>
            <div><a href="#"><img src="pic4.jpg"></a></div>
            <div><a href="#"><img src="pic5.jpg"></a></div>
            <div><a href="#"><img src="pic6.jpg"></a></div>
        </div>

这是css代码

#wrapper-banner {
    width: 909px;
    margin: 0 auto;
    margin-top: 0px;
    -ms-transform: translate(0, -49px);
    /* IE 9 */
    -webkit-transform: translate(0px, -49px);
    /* Safari */
    transform: translate(0px, -49px);
    /* Standard syntax */
    border: 1px solid white;
    border-top-color: #e99f2e;
    height: 443px;
    overflow: hidden;
}

#wrapper-banner img {
    clear: both;
    display: block;
    margin: auto;
    width: 908px;
    height: 441px;
}

这是js代码，我使用fadeout和fadein函数。

$("#wrapper-banner > div:gt(0)").hide();


setInterval(function() {
  $('#wrapper-banner > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#wrapper-banner');
},  3000);

即使是第一张照片也不会隐藏。我担心我的CSS可能有问题。任何人都可以帮助我吗？非常感谢你！

Answer 1

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

#wrapper-banner {
  width: 909px;
  margin: 0 auto;
  margin-top: 0px;
  -ms-transform: translate(0, -49px);
  /* IE 9 */
  -webkit-transform: translate(0px, -49px);
  /* Safari */
  transform: translate(0px, -49px);
  /* Standard syntax */
  border: 1px solid white;
  border-top-color: #e99f2e;
  height: 443px;
  overflow: hidden;
}

#wrapper-banner img {
  clear: both;
  display: block;
  margin: auto;
  width: 908px;
  height: 441px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper-banner">
  <div class="alive">
    <a href="#"><img src="http://assets.pokemon.com/static2/_ui/img/chrome/external_link_bumper.png"></a>
  </div>
  <div>
    <a href="#"><img src="http://www.pokemon-sunmoon.com/media/uploads/nov_14_assets/promos/promo-3-distro-pokemon-400x240.png"></a>
  </div>
  <div>
    <a href="#"><img src="http://files.onset.freedom.com/ocregister/news/2016/focus/pokemon071416/pik.jpg"></a>
  </div>
  <div>
    <a href="#"><img src="https://heidi.community.uaf.edu/files/2015/04/Pokemon_Icons_by_d4rkbl4de.jpg"></a>
  </div>
  <div>
    <a href="#"><img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//739.png"></a>
  </div>
</div>

jQuery滑动横幅失败

1 个答案: