多个幻灯片容器

Question

我有问题。我是建立网页的新手。我正在尝试在网页上构建两个与幻灯片容器相同的相同的幻灯片容器。容器显示不错。问题在于，我的幻灯片显示容器下的按钮都适合上一个。较低的幻灯片容器不起作用。它留在第一张图片上。谁能告诉我我的代码怎么了？

非常感谢大家！

<div>
      <div class="neergard-container">
        <div class="mySlides fade">
          <div class="numbertext">1 / 9</div>
          <img src="/Bilder Weinberg/Wohzimmer111.jpg" style="width: 100%" />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">2 / 9</div>
          <img
            src="/Bilder Weinberg/WohzimmerSofaecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">3 / 9</div>
          <img
            src="/Bilder Weinberg/SchlafzimmerEinzelbetten111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">4 / 9</div>
          <img
            src="/Bilder Weinberg/Schlafzimmeroben111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">5 / 9</div>
          <img
            src="/Bilder Weinberg/KleideraufbewahrungOben111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">6 / 9</div>
          <img
            src="/Bilder Weinberg/Kücheblickraus111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">7 / 9</div>
          <img
            src="/Bilder Weinberg/KücheSitzecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">8 / 9</div>
          <img
            src="/Bilder Weinberg/Esstischwintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="mySlides fade">
          <div class="numbertext">9 / 9</div>
          <img
            src="/Bilder Weinberg/StühleWintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      </div>
      <br />

      <div style="text-align: center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        <span class="dot" onclick="currentSlide(4)"></span>
        <span class="dot" onclick="currentSlide(5)"></span>
        <span class="dot" onclick="currentSlide(6)"></span>
        <span class="dot" onclick="currentSlide(7)"></span>
        <span class="dot" onclick="currentSlide(8)"></span>
        <span class="dot" onclick="currentSlide(9)"></span>
      </div>

      <script>
        let slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
          showSlides((slideIndex += n));
        }

        function currentSlide(n) {
          showSlides((slideIndex = n));
        }

        function showSlides(n) {
          let i;
          let slides = document.getElementsByClassName("mySlides");
          let dots = document.getElementsByClassName("dot");
          if (n > slides.length) {
            slideIndex = 1;
          }
          if (n < 1) {
            slideIndex = slides.length;
          }
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
          }
          slides[slideIndex - 1].style.display = "block";
          dots[slideIndex - 1].className += " active";
        }
      </script>
    </div>

    <h3 class="KutscherFW">Kutscherwohnung</h3>
    <p id="kutscher">
      Kutscherwohnung Einer weitere traumhafte Ferienwohung in Strande bei Kiel.
      Kaum enfernt vom Wasser die frische Luft genießen.
    </p>

    <div>
      <div class="kutscher-container">
        <div class="kutscherFolie fade">
          <img src="/Bilder Weinberg/Wohzimmer111.jpg" style="width: 100%" />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/WohzimmerSofaecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/SchlafzimmerEinzelbetten111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/Schlafzimmeroben111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/KleideraufbewahrungOben111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/Kücheblickraus111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/KücheSitzecke111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/Esstischwintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <div class="kutscherFolie fade">
          <img
            src="/Bilder Weinberg/StühleWintergarten111.jpg"
            style="width: 100%"
          />
        </div>

        <a class="prev" onclick="plusFolien(-1)">❮</a>
        <a class="next" onclick="plusFolien(1)">❯</a>
      </div>
      <br />

      <div style="text-align: center">
        <span class="button" onclick="currentSlide(1)"></span>
        <span class="button" onclick="currentSlide(2)"></span>
        <span class="button" onclick="currentSlide(3)"></span>
        <span class="button" onclick="currentSlide(4)"></span>
        <span class="button" onclick="currentSlide(5)"></span>
        <span class="button" onclick="currentSlide(6)"></span>
        <span class="button" onclick="currentSlide(7)"></span>
        <span class="button" onclick="currentSlide(8)"></span>
        <span class="button" onclick="currentSlide(9)"></span>
      </div>

      <script>
        let folieNumber = 1;
        showFolie(folieNumber);

        function plusFolie(n) {
          showFolie((folieNumber += n));
        }

        function currentFolie(n) {
          showFolie((folieNumber = n));
        }

        function showFolie(n) {
          let i;
          let folie = document.getElementsByClassName("kutscherFolie");
          let buttons = document.getElementsByClassName("button");
          if (n > folie.length) {
            folieNumber = 1;
          }
          if (n < 1) {
            folieNumber = folie.length;
          }
          for (i = 0; i < folie.length; i++) {
            folie[i].style.display = "none";
          }
          for (i = 0; i < buttons.length; i++) {
            buttons[i].className = buttons[i].className.replace(" active", "");
          }
          folie[folieNumber - 1].style.display = "block";
          buttons[slideNumber - 1].className += " active";
        }
      </script>
    </div>

Answer 1

首先，下方和上方的两个幻灯片都在调用相同的功能。

“ CurrentSlide”

我认为下面的幻灯片应调用另一个功能。 “ CurrentFolie”
还有一个错字。没有“ PlusFolien”功能。也许这是一个“ Showfolie”功能。