JavaScript setInterval：根据给定的时间段更改活动div

Question

我有6张图片显示如下。第一个div包含4个图像，其余2个图像放置到第二个div。以子弹的形式使用我的分页。我要达到的目标是每3秒自动更改一次激活的div。我唯一想到的就是使用setInterval。

这是JavaScript代码

function showFrameIndex(index) {
var frames = document.getElementsByClassName('gall-frame');
var badges = document.getElementsByClassName('badge-item');
var i;

for (i = 0; i < frames.length; i++) {
frames[i].style.display = 'none';
}
frames[index].style.display = 'flex';

for (i = 0; i < badges.length; i++) {
badges[i].className = 'badge-item badge-item-inactive';
}
badges[index].className = 'badge-item';
}
var displayIndexFrame = 0;
showFrameIndex(displayIndexFrame);

这是当前输出

第一分区  

第二分区

Answer 1

这是一个简单的示例，说明如何隐藏某些内容并显示其他内容，我敢肯定还有更好的方法，现在在setInterval的回调中，您将 必须添加代码来更改您拥有的项目符号。此外，如果只希望发生一次，请将setInterval更改为setTimeout

let d1 = document.querySelector('.d1');
let d2 = document.querySelector('.d2');
let timeinSec = 3;
setInterval(() => {
  d1.classList.toggle('hide');
  d2.classList.toggle('hide');
}, timeinSec * 1000);

.d1,
.d2 {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

.d2 {
  background: orange;
}

.hide {
  display: none;
}

<div class="d1 hide"></div>
<div class="d2"></div>