Question

我说3个div都位于0,0px的顶部。

Div 1（Z-Index：0） Div 2（Z-Index：1） Div 3（Z-Index：2）

如何在每30秒后更改顺序，以便循环遍历所有div（使用ID标记）。因此，在30秒后，Div 2位于顶部，Div位于底部，30秒后，div 3位于顶部，Div 2位于底部等...

Answer 1

您不需要框架或类似的东西。这其实很简单。这是一个使用jQuery作为lib的快速演示，但如果需要，你也可以使用jilla。

https://jsfiddle.net/jL2youk6/

您需要做的就是设置一个间隔并增加一个索引，然后选择该索引处的div并指定一个“活动”字样。类或只有一组z-index的东西。

＆＃13;

var $box = $('.box'),
  active_box = 0,
  time = 30000;

setInterval(function() {

  // Check out active box index
  if (active_box < $box.length - 1) {
    active_box++
  } else {
    active_box = 0;
  }
  
  // Set the active and remove active from siblings
  $box.eq(active_box).addClass('active').siblings().removeClass('active')

}, time);

＆＃13;

.box {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 100px;
  z-index: 0;
}

.active {
  z-index: 2;
}

#a {
  background-color: red;
}

#b {
  background-color: blue;
}

#c {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='box active' id='a'>1</div>
<div class='box' id='b'>2</div>
<div class='box' id='c'>3</div>

＆＃13;

使用Z-index滚动Div

1 个答案: