javascript - 使用 Z-index 滚动浏览 Div

Question

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

分区 1(Z 索引:0) 分区 2(Z 索引:1) 分区 3(Z 索引:2)

我如何在每 30 秒后更改一次顺序，以便它循环遍历所有 div(使用 ID 标记)。所以 30 秒后，Div 2 在顶部，Div 1 在底部，然后在 30 秒后，div 3 在顶部，Div 2 在底部等等......

Answer 1

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

https://jsfiddle.net/jL2youk6/

您需要做的就是设置一个间隔并增加一个索引，然后选择该索引处的 div 并分配一个“事件”类或仅具有一组 z-index 的东西。

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

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

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