Javascript 在同一页面上的多个库上使用幻灯片功能

我在一个页面上有多个相同类的库。我添加了一个滑块

JavaScript函数

。它可以工作，但如果我关闭灯箱（当前滑块）并打开另一个，它会从上一个幻灯片索引开始，滑块变化更快，并且出现控制台错误：

uncaughttypeerror:document.querySelector（…）为null

这是简化的JS代码：

var slideNum = 0;
var slides;

function showSlides() {
    var i;
    slides = document.querySelector("#Images").childNodes;
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideNum++;
    if (slideNum> slides.length) {slideNum = 1}  
    slides[slideNum-1].style.display = "block";
    setTimeout(showSlides, 3000); 
}

var slideNum=0；
var幻灯片；
函数showSlides（）{
var i；
幻灯片=document.querySelector（#Images”）.childNodes；
对于（i=0；islides.length）{slideNum=1}
幻灯片[slideNum-1].style.display=“block”；
设置超时（幻灯片显示，3000）；
}

---

是否有方法停止

功能

并在另一个库中单击

启动它？
以下内容可能会有所帮助。它使用从主函数中调用的自动执行匿名函数返回当前
slideum
变量。。。当加载新库时，此选项将持续存在。我很感激，这可能与您的多媒体资料设置不太相似，但毫无疑问可以进行调整


var pause=10；
var slideNum=0；
var幻灯片；
var-tx=NaN；
常数=函数（id）{
document.querySelectorAll（'.ss>img'）.forEach（img=>{
img.style.display='none'；
})
slides=document.querySelectorAll（'#'+id+'>img'）；
返回幻灯片；
}
常量showSlides=函数（id）{
SlideEnum--；//以便在调用下一个幻灯片时，索引不会递增
console.clear（）；
console.info（'新幻灯片放映：%s，索引：%d'，id，幻灯片编号）；
如果（！isNaN（tx））清除超时（tx）；
幻灯片=幻灯片（id）；
slideNum=函数（）{
如果（slideNum<0 | | slideNum>=slides.length）slideNum=0；
明信片（id）；
幻灯片[slideNum].style.display='block'；
console.info（'Gallery:%s，Index:%d-标题：%s'，id，slideNum，slides[slideNum].Title）；
tx=设置超时（arguments.callee，1000*暂停）；
slideum++；
返回slideNum；
}();
};
div.ss{margin:1rem auto；}
div>img{显示：无}
img{宽度：300px；高度：200px}
{文本装饰：无；字体系列：monospace；}
a:悬停{文本装饰：下划线；颜色：红色}
a:在{content:'|'；边距：0 1rem；}之后
a:类型的最后一个：{content:none}之后

请添加一个完全工作的example@yanzen好的，我会的，谢谢你的回答，但是我的代码很复杂，因为库是动态添加的。这就是为什么我不能那样做。你能告诉我如何停止超时在函数内的函数吗？比如：var start=document.querySelector（“#start”）；var stop=document.querySelector（“停止”）；start.onclick=函数FunStart（）{console.log（“start”）；setTimeout（FunStart，1000）；}；stop.onclick=函数stopFun（）{clearInterval（FunStart）；console.log（“Stoped”）}