列表的多幻灯片无法正常工作

Question

前两个清单工作得很好，尤其是当我从代码中删除第三个和第四个清单时。第三个列表没有显示任何图像，第四个列表一次显示所有图像，直到您单击下一步按钮，然后它们也都消失了。

网页图片：

这是我包含列表的主要元素

<main>
    <h2>Latest Listings</h2>
    <div class="main-gallery">
        <div class="container">
            <div class="mySlides1">
                <div class="numbertext">1 / 3</div>
                <img src="images/home1.1.jpg" alt="home demo image">
            </div>

            <div class="mySlides1">
                <div class="numbertext">2 / 3</div>
                <img src="images/home1.2.jpg" alt="home demo image">
            </div>

            <div class="mySlides1">
                <div class="numbertext">3 / 3</div>
                <img src="images/home1.3.jpg" alt="home demo image">
            </div>

            <button class="prev" onclick="plusDivs(-1, 0)">&#10094;</button>
            <button class="next" onclick="plusDivs(1, 0)">&#10095;</button>

            <div class="caption-container"><p>8 / 3br - Townhouse</p></div>
        </div>
        <div class="container ">
            <div class="mySlides2">
                <div class="numbertext">1 / 5</div>
                <img src="images/home2.1.jpg" alt="home demo image">
            </div>

            <div class="mySlides2">
                <div class="numbertext">2 / 5</div>
                <img src="images/home2.2.jpg" alt="home demo image">
            </div>

            <div class="mySlides2">
                <div class="numbertext">3 / 5</div>
                <img src="images/home2.3.jpg" alt="home demo image">
            </div>

            <div class="mySlides2">
                <div class="numbertext">4 / 5</div>
                <img src="images/home2.4.jpg" alt="home demo image">
            </div>

            <div class="mySlides2">
                <div class="numbertext">5 / 5</div>
                <img src="images/home2.5.jpg" alt="home demo image">
            </div>

            <button class="prev" onclick="plusDivs(-1, 1)">&#10094;</button>
            <button class="next" onclick="plusDivs(1, 1)">&#10095;</button>

            <div class="caption-container"><p>5 / Fully Furnished, Beautiful 1-Bedroom Apt.</p></div>
        </div>

        <div class="container">
            <div class="mySlides3">
                <div class="numbertext">1 / 6</div>
                <img src="images/home3.1.jpg" alt="home demo image">
            </div>

            <div class="mySlides3">
                <div class="numbertext">2 / 6</div>
                <img src="images/home3.2.jpg" alt="home demo image">
            </div>

            <div class="mySlides3">
                <div class="numbertext">3 / 6</div>
                <img src="images/home3.3.jpg" alt="home demo image">
            </div>

            <div class="mySlides3">
                <div class="numbertext">4 / 6</div>
                <img src="images/home3.4.jpg" alt="home demo image">
            </div>

            <div class="mySlides3">
                <div class="numbertext">5 / 6</div>
                <img src="images/home3.5.jpg" alt="home demo image">
            </div>

            <div class="mySlides3">
                <div class="numbertext">6 / 6</div>
                <img src="images/home3.6.jpg" alt="home demo image">
            </div>

            <button class="prev" onclick="plusDivs(-1, 2)">&#10094;</button>
            <button class="next" onclick="plusDivs(1, 2)">&#10095;</button>

            <div class="caption-container"><p>,000 / 2 Bedroom, 2 Bath Apartment DUPLEX</p></div>
        </div>
        
        
        <div class="container">
            <div class="mySlides4">
                <div class="numbertext">1 / 5</div>
                <img src="images/home4.1.jpg" alt="home demo image">
            </div>

            <div class="mySlides4">
                <div class="numbertext">2 / 5</div>
                <img src="images/home4.2.jpg" alt="home demo image">
            </div>

            <div class="mySlides4">
                <div class="numbertext">3 / 5</div>
                <img src="images/home4.3.jpg" alt="home demo image">
            </div>

            <div class="mySlides4">
                <div class="numbertext">4 / 5</div>
                <img src="images/home4.4.jpg" alt="home demo image">
            </div>

            <div class="mySlides4">
                <div class="numbertext">5 / 5</div>
                <img src="images/home4.5.jpg" alt="home demo image">
            </div>

            <button class="prev" onclick="plusDivs(-1, 3)">&#10094;</button>
            <button class="next" onclick="plusDivs(1, 3)">&#10095;</button>

            <div class="caption-container"><p>0 / Remodeled 2BR 1 BA with large yard</p></div>
        </div>
    </div>

</main>

下面是 javascript 我曾经循环浏览每张幻灯片中的图像

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4"];
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);
showDivs(1, 3);

function plusDivs(n, no) {
    showDivs(slideIndex[no] += n, no);
}

function showDivs(n, no) {
    var i;
    var x = document.getElementsByClassName(slideId[no]);
    if (n > x.length) {slideIndex[no] = 1}
    if (n < 1) {slideIndex[no] = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
    }
    x[slideIndex[no]-1].style.display = "block";  
}

这是正在使用的CSS：

main img {
  vertical-align: middle;
  height: 250px;
  width: 100%;
  border-radius: 10px 10px 0 0;
}

.main-gallery {
  width: 120%;
  display: flex;
  overflow: hidden;
  flex-direction: row;
  padding: 10px;
  margin: 0 auto;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  width: 20%;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 10px 10px 15px #555;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  border: none;
  background: none;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.prev:focus,
.next:focus {
  outline: none;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #FFFFFF;
  padding: 2px 16px;
  border-radius: 10px;
  color: #000000;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

我不确定我做了什么让它不起作用，我花了几天时间试图找出错误。这就是为什么我希望有人能指出我的错误。如果您需要任何其他信息来帮助，请告诉我。

Answer 1

您编写的代码要求您为每个幻灯片放映的“slideIndex”数组添加一个新值“1”

替换

var slideIndex = [1, 1]

有了这个：

var slideIndex = [1, 1, 1, 1];

列表的多幻灯片无法正常工作

Multi slideshow for listings not working properly

html

javascript

css

slideshow