一页上的多个幻灯片效果不好

Question

初学者:) 我知道之前有人问过它，但我还找不到解决方案。我在一页上有两个自动幻灯片运行，一个在另一个下面。他们都工作，但工作非常糟糕，时间没有设定好，也没有像应该的那样循环。但是 - 如果我在页面中只保留一个幻灯片，它就可以正常工作。我已经为此苦苦挣扎了几个小时。

这是我的 html:

        <div class= "gallry">
        <ul id="slides" dir="rtl" onclick="nextSlide">

            <li class="slide showing"> <img id="firstImg" src=".img.jpg"> </li>
            <li class="slide"> <img src=".img1.jpg"></li>
            <li class="slide"><img src=".img2.jpg"></li>
        </ul>  
    </div>





    <div class="gallery">
        <ul id="slides2" dir="rtl">


            <li class="slidetwo showing"> <img id="firstImg2" src=".img3.jpg"></li>
            <li class="slidetwo"><img src=".img4.jpg"></li>
            <li class="slidetwo"><img src=".img5.jpg"></li>

        </ul>
    </div>

这是我的css

#slides {
    position: relative;
    height: 100%;
    padding: 0;
    margin:0;
    list-style-type: none;
}

#slides2 {
    position: relative;
    height: 100%;
    padding: 0;
    margin:0;
    list-style-type: none;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}


.slidetwo {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}


img {
    max-height: 95vh;
    max-width: calc(100vw - 80px);
}

.showing {
    opacity: 1;
    z-index: 2;
}

这是我的 javascript:

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


var slides2 = document.querySelectorAll('#slides2 .slidetwo');
var currentSlide = 0;
var slideInterval = setInterval(nextSlideTwo,1000);

function nextSlideTwo() {
    slides2[currentSlide].className = 'slidetwo';
    currentSlide = (currentSlide+1)%slides2.length;
    slides2[currentSlide].className = 'slidetwo showing';
}

非常感谢！

Answer 1

所以我首先看到的是您正试图为两个幻灯片重用相同的全局变量。发生的情况是，当 setInterval() 中的这两个调用都是运行ning 时，它们正在寻址相同的变量，这将导致图像显示无序、计时问题和其他类似问题东西。

我建议您尝试将变量分开，以便 nextSlide() 和 nextSlideTwo() 处理和更新不同的内容，因为它们运行。例如：

var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,3000);

function nextSlide() {
    slides[currentSlide].className = 'slide';
    currentSlide = (currentSlide+1)%slides.length;
    slides[currentSlide].className = 'slide showing';
}


var slides2 = document.querySelectorAll('#slides2 .slidetwo');
var currentSlide2 = 0;
var slideInterval2 = setInterval(nextSlideTwo,1000);

function nextSlideTwo() {
    slides2[currentSlide2].className = 'slidetwo';
    currentSlide2 = (currentSlide2+1)%slides2.length;
    slides2[currentSlide2].className = 'slidetwo showing';
}

很快就会把它扔到 fiddle 中，看看它如何运行以及是否需要任何其他调整。

一页上的多个幻灯片效果不好

multiple slideshow on one page works bad

javascript

slideshow