列表无法正常播放的多个幻灯片

问题描述

前两个清单可以完美地工作，特别是如果我从代码中删除了第三个和第四个清单。第三个清单没有显示任何图像，第四个清单同时显示了所有图像，直到您单击下一步按钮，它们也都消失了。

网页图片：

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

<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>$608 / 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>$685 / 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>$1,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>$700 / 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.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;
}

我不确定该怎么做才能使它不起作用，并且我花了很多天试图找出错误。这就是为什么我希望有人可以指出我的错误。让我知道您是否需要其他信息来帮助您。

解决方法

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

替换

var slideIndex = [1,1]

与此：

var slideIndex = [1,1,1];