jQuery滑动横幅失败

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

<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代码，我使用的淡出和淡入功能。

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


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

即使是第一张照片将不会hide.I'm担心可能有什么毛病我CSS.Any机构可以帮助我吗？非常感谢您！

来源

2017-06-12 William Li

你有没有加载的页面上jQuery库？似乎在工作。 –

是的。现在只有前三张照片滑动。 –

我犯了很低的错误。现在的代码工作！谢谢你的朋友！ –

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

来源

2017-06-12 21:23:16

jQuery滑动横幅失败

回答

相关问题