javascript - 如何向我的 JS 循环添加更多可见图像

Question

我正在创建一个图像轮播，并尝试一次添加多个可见图像，并排放置 - 内嵌。我认为这会是一项简单的任务，但事实证明这很麻烦。

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 2
    }
    slides[slideIndex - 1].style.display = "inline-block";
    // dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

我原以为我只能修改幻灯片索引或 for 循环，但代码根本不起作用。.截至目前，代码将单独循环，但我无法让任何其他图像在transition.. 在幻灯片放映期间至少有三张图片并排放置，然后再过渡到另外三张图片会很好。

Answer 1

为什么会这样？此 block 隐藏所有图像。

var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none";
}

这个 block 只显示一个

slideIndex++;
if (slideIndex> slides.length) {slideIndex = 2}
slides[slideIndex-1].style.display = "inline-block";

超时后，所有一张可见图像将再次隐藏，并且只会打开一张。

如果你要显示更多图片试试

slideIndex++;
if (slideIndex> slides.length) {slideIndex = 2}
for (i = 0; i < slideIndex; i++) {
  slides[slideIndex-i].style.display = "inline-block";
}

如果你要显示更多图片并且每次都有不同的图片试试这个

var countOfShownimages = 3;

slideIndex++;
if (slideIndex < countOfShownimages || slideIndex > slides.length) { 
  slideIndex = countOfShownimages;
}

for (i = slideIndex - countOfShownimages; i < slideIndex; i++) {
  slides[i].style.display = "inline-block";
}