如何在同一页面上获得两个幻灯片显示？

问题描述

我正在为任务创建网站，并试图在页面上添加第二个幻灯片，但是，当我这样做时，它将第一个幻灯片和所有图片移动到我要添加的部分中至。我在下面有我的代码示例-该代码显示了我正在使用的Java：

var slideIndex = 1;
showSlides(slideIndex);

// Next/prevIoUs controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var 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";
}

和我拥有的html

main>
    
    <section>       
            
        <div class="flex-container">

            <div class="flex-child">
                
                <!--------------Shine Falls ----------->

                <!-- Slideshow container -->
                <div class="slideshow-container">

                  <!-- Full-width images with number and caption text -->
                  <div class="mySlides fade">
                    <div class="numbertext">1 / 5</div>
                    <img src="Images/Shine Falls/s2.jpg" style="width:100%">
                    <div class="text">Shine Falls entry</div>
                  </div>

                  <div class="mySlides fade">
                    <div class="numbertext">2 / 5</div>
                    <img src="Images/Shine Falls/s3.jpg" style="width:100%">
                    <div class="text">Shine Falls entry</div>
                  </div>

                  <div class="mySlides fade">
                    <div class="numbertext">3 / 5</div>
                    <img src="Images/Shine Falls/s4.jpg" style="width:100%">
                    <div class="text">Shine Falls farm track</div>
                  </div>
                  
                  <div class="mySlides fade">
                    <div class="numbertext">4 / 5</div>
                    <img src="Images/Shine Falls/s5.jpg" style="width:100%">
                    <div class="text">Shine Falls</div>
                  </div>
                  
                  <div class="mySlides fade">
                    <div class="numbertext">5 / 5</div>
                    <img src="Images/Shine Falls/s6.jpg" style="width:100%">
                    <div class="text">Shine Falls base</div>
                  </div>

                  <!-- Next and prevIoUs buttons -->
                  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                  <a class="next" onclick="plusSlides(1)">&#10095;</a>
                </div>
                <br>

                <!-- The dots/circles -->
                <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>
                </div>

                <!---Icons under images -->
                <div class= "icon-display">
                    <a><img  src="Images/Icons/nodogs.png" alt="No Dogs Allowed" /></a>
                    <a><img src="Images/Icons/picnictable.png" alt="Picnic Area" /></a>
                    <a><img src="Images/Icons/toilet.png" alt="Toilets" /></a>
                    <a><img  src="Images/Icons/swimming.png" alt="Swimming Area" /></a>
                    <a><img src="Images/Icons/Nowater.png" alt="No Water" /></a>
                    <a><img src="Images/Icons/vehicle.png" alt="All Vehicle Access" /></a>
                </div>
                
                <p>Shine Falls</p>
          
            </div>
          
            <!--------------Maraetotara Falls----------->
          
            <div class="flex-child">
                 ***[** I WANT TO ADD MY SECOND SLIDESHOW HERE **][1]***
                <div>
                    <img src = "Images/Maraetotara Falls/m1.jpg">
                </div>
            
                <div class= "icon-display">
                    <a><img  src="Images/Icons/nodogs.png" alt="No Dogs Allowed" /></a>
                    <a><img src="Images/Icons/picnictable.png" alt="Picnic Area" /></a>
                    <a><img src="Images/Icons/toilet.png" alt="Toilets" /></a>
                    <a><img  src="Images/Icons/swimming.png" alt="Swimming Area" /></a>
                    <a><img src="Images/Icons/Nowater.png" alt="No Water" /></a>
                    <a><img src="Images/Icons/vehicle.png" alt="All Vehicle Access" /></a>
                </div>
                
                <p>Maraetotara Falls</p>
                    <p>frjkfsfapkfnaegjbesjglnsjgbsdkgjbsdjfbdakjbgsjdbgsjbssf
                    sdjfbsdgbkdsklgnflkdnglkfdnhgfdklnhgkhngklhgf
                    fndfnf sjkfnshdkghsfhgri... <a href="MaraetotaraFalls.html">Read More</a></p>
                    
            </div>

        </div>

    </section>  
        
</main>

我基本上想在另一部分复制幻灯片，但是要使用不同的图片。我在下面添加了我的网站的图片，以提供帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript slideshow