Question

我正在尝试编写一个函数，该函数将通过我的站点上的img拇指自动轮播，轮流显示12个不同的图像集，这些图像仅放在一个div中。下面的javascript可以正常工作，但是只要我能在每个div中使用相同数量的图像即可。我也确信，我花了很长的时间告诉javascript，如何对变量进行处理，所以我的问题是，应该更改什么，以便在单独的div中可以容纳不同数量的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进行计数（因此请不要重置它），并将modulus % operator与每个图像集的数组长度一起使用。

更多说明：

“超时/间隔”的值以毫秒为单位。所以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>

自动循环轮播，适用于多个div和不同的img

1 个答案: