javascript - 一页上的多个幻灯片

Question

我真的很难在一个页面上添加多个幻灯片。 一个工作得很好，但我一添加第二个它就崩溃了。

我认为问题出在 Javascript 中，但我真的不知道该怎么办。已经尝试了很多...

如果有人有一些想法，我将不胜感激。 感谢您的支持!!

这是 HTML 的样子:

 <!-- slideshow 1 -->

<div class="slidercontainer">  
    <div class="showSlide fade">  
        <img src="images/img1.jpg" />   
    </div>  
    <div class="showSlide fade">  
        <img src="images/img2.jpg"/>  
    </div>  
    <div class="showSlide fade">  
        <img src="images/img3.jpg"/>   
    </div>  
    <!-- Navigation arrows -->  
    <a class="left" onclick="nextSlide(-1)">LEFT</a>  
    <a class="right" onclick="nextSlide(1)">RIGHT</a>  
</div>  

<p> text between slideshow </p>

<!-- slideshow 2 -->

<div class="slidercontainer">  
    <div class="showSlide fade">  
        <img src="images/img1.jpg" />   
    </div>  
    <div class="showSlide fade">  
        <img src="images/img2.jpg"/>  
    </div>  
    <div class="showSlide fade">  
        <img src="images/img3.jpg"/>   
    </div>  
    <!-- Navigation arrows -->  
    <a class="left" onclick="nextSlide(-1)">LEFT</a>  
    <a class="right" onclick="nextSlide(1)">RIGHT</a>  
</div>  

CSS:

body {  
margin: 0;  
background: #e6e6e6;  
    }  
    .showSlide {  
        display: none  
    }  
        .showSlide img {  
            width: 100%;  
        }  
    .slidercontainer {  
        max-width: 65vw;  
        position: relative;   
        background: red;
    }  
    .left, .right {  
        cursor: pointer;  
        position: absolute;  
        top: 0;
        height: 100%;  
        width: 50%;  
        color: white;  
        font-weight: bold;  
        font-size: 18px;  
        transition: 0.6s ease;  
        border-radius: 0 3px 3px 0;  
    }  
    .right {  
        right: 0;  
        border-radius: 3px 0 0 3px;  
    }  
        .left:hover, .right:hover {  
            background-color: rgba(115, 115, 115, 0.8);  
        }  

    .active {  
        background-color: #717171;  
    }  
    /* Fading animation */  
    .fade {  
        -webkit-animation-name: fade;  
        -webkit-animation-duration: 1.5s;  
        animation-name: fade;  
        animation-duration: 1.5s;  
    }  
    @-webkit-keyframes fade {  
        from {  
            opacity: .4  
        }  
        to {  
            opacity: 1  
        }  
    }  

    @keyframes fade {  
        from {  
            opacity: .4  
        }  
        to {  
            opacity: 1  
        }  
    }  

Javascript:

var slide_index = 1;  
displaySlides(slide_index);  
function nextSlide(n) {  
displaySlides(slide_index += n);  
    }  

    function currentSlide(n) {  
        displaySlides(slide_index = n);  
    }  
    function displaySlides(n) {  
        var i;  
        var slides = document.getElementsByClassName("showSlide");  
        if (n > slides.length) { slide_index = 1 }  
        if (n < 1) { slide_index = slides.length }  
        for (i = 0; i < slides.length; i++) {  
            slides[i].style.display = "none";  
        }  
        slides[slide_index - 1].style.display = "block";  
    } 

Answer 1

您当前的问题是您的画廊假定所有具有类名 showSlide 的元素都属于画廊，而这不是您所追求的。

而不是用

选择元素

document.getElementsByClassName("showSlide");

您需要确定要触发的图库。 尝试将图库 ID 发送到 nextSlide() 函数。这样您就可以准确地选择正确库中的幻灯片。

<a class="left" onclick="nextSlide(-1, 'gallery1')">LEFT</a>

并为每个画廊容器提供标识符:

<div class="slidercontainer" id="gallery1">
    ...
</div>

这样，在您的 nextSlide 函数中，您将获得该 ID 并将其传递给 displaySlides，就像这样

function nextSlide(n, gallery) {  
    displaySlides(slide_index += n, gallery);  
}

初始化画廊时，您需要有一个循环动态地遍历所有画廊

var galleries = document.querySelectorAll('.slidercontainer');
for (i = 0 ; i < galleries.length ; i++) {
    displaySlides(slide_index, galleries[i]);
}

最后，只选择适当画廊的幻灯片

var slides = document.querySelector('#' + gallery + ' .showSlide');

看起来它会起作用。我自己还没有测试过，并且可能会以不同的方式实现这整个事情，但至于你的问题，这应该没问题。如果有任何不清楚或不起作用的地方，请随时发表评论，我会查看。