Question

通过在一个页面中添加多个幻灯片，我真的很挣扎。一个工作非常好，但是一旦我添加第二个就崩溃了。

我认为问题出现在Javascript中，但我真的没有clou，我能做些什么呢。已经尝试了很多......

如果有人有想法，我会非常感激。谢谢你的支持!!

这就是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');

似乎它会起作用。我自己没有测试过，可能会把这整个事情实现一点点不同，但至于你的问题，这应该没问题。如果有什么不清楚或不起作用，请随意发表评论，我会看看它。

一页上有多个幻灯片

1 个答案: