javascript - 无论如何，我可以使用相同的脚本但用于 divs id 标记而不是图像？

Question

我一直在尝试为我正在制作的网页创建这个特定的幻灯片。每次我尝试用 id 标签替换图像时，幻灯片都会停在第一张图片上。我只想要一种使用相同方法使用 div id 创建幻灯片放映的方法(因为我试图在面板上编写/编辑)。如果还有其他方法，请一并说明。

这是我用于图像的代码:

var pic = document.getElementById("car");
var Array = ["images/pic_1.jpg", "images/pic_2.jpg", "images/pic_3.jpg"];
var index = 0;

function myFunction() {
  pic.setAttribute("src", Array[index]);
  index++;
  if (index >= Array.length) {
    index = 0;
  }
}

setInterval(myFunction, 1000);

Answer 1

实际上，您可以使用部分代码(和基本思想)，并执行如下操作:

var index = 0;
slides=document.querySelectorAll('.slide');
function myFunction() {
for(i=0;i<slides.length;i++) {
slides[i].style.display='none'; //hide all
}
slides[index].style.display='block'; //show current
  index++;
  if (index >= slides.length) {
    index = 0;
  }
}

setInterval(myFunction, 1000);

演示:

var index = 0;
slides=document.querySelectorAll('.slide');
function myFunction() {
for(i=0;i<slides.length;i++) {
slides[i].style.display='none'; //hide all
}
slides[index].style.display='block'; //show current
  index++;
  if (index >= slides.length) {
    index = 0;
  }
}

setInterval(myFunction, 1000);

.slide {
  display:none;
  position:absolute;
}

<div id="container">


<div class="slide">
111111
</div>
<div class="slide">
222222222
</div>
<div class="slide">
333333333333
</div>
</div>