javascript - 在一个网页上使用不同组的幻灯片进行幻灯片放映

Question

我有一个包含多个弹出窗口的网站，我想在每个弹出窗口中放一个幻灯片。当我添加第二个幻灯片时，第一个幻灯片中的幻灯片出现在第二个幻灯片中。

我使用 .getElementsByClassName 为幻灯片指定图像，但我不明白如何为每个幻灯片分隔特定幻灯片或调整函数以处理每个幻灯片的多个类名称。

我的代码如下。

<div id="popup1" class="overlay">
<div class="popup">
    <h2>YAMAHA XV950 (BOLT)</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
        <div class="slideshow-container">
            <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="YAMAHA%20XV950.png"  height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="YAMAHA%20XV950-2.png" height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="YAMAHA%20XV950-3.png" height="330">
            <div class="text"></div>
            </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</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> 
        </div>
        <br>
    </div>
</div>
</div>
<div id="popup2" class="overlay">
<div class="popup">
    <h2>SUZUKI INTRUDER (BOLT)</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
        <div class="slideshow-container">
            <div class="mySlides1 fade">
            <div class="numbertext">1 / 3</div>
            <img src="SintruderC1500BT%20B.O.S.S..png"  height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides1 fade">
            <div class="numbertext">2 / 3</div>
            <img src="SintruderC800B%20B.O.S.S..png" height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides1 fade">
            <div class="numbertext">3 / 3</div>
            <img src="SintruderM1800R.png" height="330">
            <div class="text"></div>
            </div>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</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> 
        </div>
        </div>
</div>
</div>
<script>

var slideIndex = 1;

showSlides(slideIndex);

function plusSlides(n) {

    showSlides(slideIndex += n);

}

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";

}

</script>                      

Answer 1

尝试在所有函数 plusSlides()、currentSlide() 和 showSlides() 中传递另一个参数，用于不同弹出窗口的幻灯片

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

function currentSlide( slide, n) {
   showSlides(slideIndex = n);
}
function showSlides( slide, n){
  var slides = document.getElementsByClassName("slide");
}

和调用函数一样，也改变了类名

<a class="next" onclick="plusSlides(myslide1,1)">&#10095;</a>
<span class="dot" onclick="currentSlide( myslide1,3)"></span> 

<a class="next" onclick="plusSlides(myslide2,1)">&#10095;</a>
<span class="dot" onclick="currentSlide( myslide2,3)"></span> 

因为您的函数正在调用所有具有 mySlides 的元素