多幻灯片容器

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”功能。

多幻灯片容器

Multiple slideshow-container

html

javascript

css

button

slideshow