自动循环旋转木制旋转木制和不同的IMG

Question

我正在尝试编写一个函数，该功能将通过我的网站上的IMG拇指自动使用12个不同的图像，这些图像将其放在一个Div中。下面的JavaScript起作用，但只有我在每个Div中具有相同数量的图像的时间。我也可以肯定的是，我走了很长的途径告诉javaScript，在变量方面该怎么办，所以我的问题是，我应该改变什么，以便我可以在单独的Divs中拥有不同数量的IMG？

非常感谢您提供的任何提示！

var myIndex = 0;
carousel();
function carousel() {
  var i;
  var u = document.getElementsByClassName("thumbs1");
  var v = document.getElementsByClassName("thumbs2");
  var w = document.getElementsByClassName("thumbs3");
  // and so on ...
  for (i = 0; i < w.length; i++) {
    u[i].style.display = "none"; 
    v[i].style.display = "none"; 
    w[i].style.display = "none";
    // ...
  }
  myIndex++;
  if (myIndex > w.length) {myIndex = 1}
  u[myIndex-1].style.display = "inline-block"; 
  v[myIndex-1].style.display = "inline-block";
  w[myIndex-1].style.display = "inline-block";
  // ...
 
  setTimeout(carousel, 1200); // Change image every 2 seconds
}

<div class="imageholder">
  <img class="thumbs1" src="image11.jpg">
  <img class="thumbs1" src="image12.jpg">
  <img class="thumbs1" src="image13.jpg">
  <img class="thumbs1" src="image14.jpg">
</div>
<div class="imageholder">
  <img class="thumbs2" src="image21.jpg">
  <img class="thumbs2" src="image22.jpg">
  <img class="thumbs2" src="image23.jpg">
</div>
<div class="imageholder">
  <img class="thumbs3" src="image31.jpg">
  <img class="thumbs3" src="image32.jpg">
  <img class="thumbs3" src="image33.jpg">
  <img class="thumbs3" src="image34.jpg">
  <img class="thumbs3" src="image35.jpg">
</div>
<!-- ... -->

Answer 1

继续计数 myIndex（请勿重置）并使用模量%操作员，并使用每个图像集的数组长度。

进一步注意：

• 超时/间隔的价值以毫秒为单位。因此2000ms = 2s
• 您无需在每次呼叫carousel()的情况下再次获取所有元素的引用。只需在开始时一次。
• 如果不清楚，请询问。

var myIndex = 0;
var i;
var u = document.getElementsByClassName("thumbs1");
var v = document.getElementsByClassName("thumbs2");
var w = document.getElementsByClassName("thumbs3");
var allThumbs = [u, v, w];
var myInterval = setInterval(carousel, 2000); // Change image every 2 seconds
function carousel() {
  myIndex++;
  for (i = 0; i < allThumbs.length; i++) {
    allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none";
    allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block";
  }
}

.thumbs1:not(:first-child),
.thumbs2:not(:first-child),
.thumbs3:not(:first-child) {
  display: none;
}

<div class="imageholder">
  <img class="thumbs1" src="image11.jpg" alt="1">
  <img class="thumbs1" src="image12.jpg" alt="2">
  <img class="thumbs1" src="image13.jpg" alt="3">
  <img class="thumbs1" src="image14.jpg" alt="4">
</div>
<div class="imageholder">
  <img class="thumbs2" src="image21.jpg" alt="1">
  <img class="thumbs2" src="image22.jpg" alt="2">
  <img class="thumbs2" src="image23.jpg" alt="3">
</div>
<div class="imageholder">
  <img class="thumbs3" src="image31.jpg" alt="1">
  <img class="thumbs3" src="image32.jpg" alt="2">
  <img class="thumbs3" src="image33.jpg" alt="3">
  <img class="thumbs3" src="image34.jpg" alt="4">
  <img class="thumbs3" src="image35.jpg" alt="5">
</div>