javascript - 每 5 秒轮换两个 div 的内容。就像横幅旋转一样

Question

我想每 5 秒旋转两个 div(如横幅旋转)。第二个 div 应该在页面加载时隐藏，5 秒后它应该出现，第一个 div 应该隐藏。

<div class="banner-containner">
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner One">
    <img src="http://placehold.it/200x60?text=Banner Base">
  </div>
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner Two">
  </div>
</div>

我们可以每 5 秒使用 banner-wrapper 类切换 div

JSFiddle 示例 https://fiddle.jshell.net/n811x6fe/9/

Answer 1

我希望这就是您所需要的:

var $container = $('.banner-containner');
var $bannerWrappers = $container.find('.banner-wrapper');

var idx = 0;
setInterval(function() {
	if(idx === $bannerWrappers.length) {
  	idx = 0;
  }
  $bannerWrappers.hide().eq(idx).toggle();
  idx++;
}, 5000);

.banner-containner {
  max-width: 200px;
  height: auto;
 float:left;
  border: 1px solid #f00;
}
.banner-wrapper {
  float:left;
  width: 100%;
  height: auto;
  
}
.xbanner-wrapper img {
  position: relative;
  width: 100%;
  float: left;
}

.banner-wrapper:last-child{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="banner-containner">
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner One">
    <img src="http://placehold.it/200x60?text=Banner Base">
  </div>
  <div class="banner-wrapper">
    <img src="http://placehold.it/200x300?text=Banner Two">
  </div>
</div>

或结账 jsfiddle .