Javascript 一页多张幻灯片效果不好

这里的初学者：） 我知道以前有人问过，但我还没找到解决办法。我有两个自动幻灯片，一个在另一个页面下运行。它们都能工作，但工作非常糟糕，时间没有设定好，也没有像应该的那样循环。但是-如果我在页面中只保留一个幻灯片，那么效果会非常好。我已经挣扎了好几个小时了

这是我的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>    

这是我的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';
}

---

非常感谢

因此，我看到的第一件事是，您试图为两个幻灯片重复使用相同的全局变量。发生的情况是，当

setInterval（）

中的两个调用都在运行时，它们都在处理相同的变量，这将导致图像显示顺序错误、计时问题以及其他类似的问题

我建议尝试将变量分离出来，以便

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';
}

---

很快就会把它放在一个提琴里，看看它是如何运行的，以及是否需要任何额外的调整。

将它与您提供的HTML和CSS一起放入JSFIDLE中，可以看出它是有效的，但在我运行它之后，它还隐藏了顶部的UI，因此我无法保存和/或共享。非常感谢！它现在工作得很好！我真的很感谢你的帮助：）

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';
}