Javascript JS创建计时器以隐藏图像幻灯片

我正在尝试创建一个图像幻灯片，在所有图像中播放，在最后一个图像上淡出，在接下来的10秒钟内不再显示任何图像，然后在10秒钟后重新开始。目前，我有它停止在最后一张图片，但它没有做任何事之后，只是卡住了。不是很确定如何完成这样的事情，所以非常感谢所有的帮助！下面是JS，如果需要任何其他脚本，请让我知道

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
   // var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex >= slides){
        setTimeout(function(){ slideIndex = 1; }, 10000);
    }
    /*for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }*/
    slides[slideIndex-1].style.display = "block";
    //dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
}

var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
//var dots=document.getElementsByClassName（“dot”）；
对于（i=0；i=幻灯片）{
setTimeout（函数（）{slideIndex=1；}，10000）；
}
/*对于（i=0；i

更新：设置间隔

var slideIndex = 0;
showSlides();

var myPause = setInterval(function(){ showSlides() }, 10000);

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        myPause;
        slideIndex = 1;
    }
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
    clearInterval(myPause);
}

var slideIndex=0；
放映幻灯片（）；
var myPause=setInterval（函数（）{showshiels（）}，10000）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
对于（i=0；i幻灯片长度）{
我的暂停；
slideIndex=1；
}
幻灯片[slideIndex-1].style.display=“block”；
setTimeout（showSlides，10000）；//每10秒更改一次图像
清除间隔（myPause）；
}

你真的很接近了。只要使用

setInterval

就足够了

var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
对于（i=1；i=slides.length）{
slideIndex=0；
}
其他的
{
幻灯片[slideIndex].style.display=“block”；
}
}, 10000);
}

img{显示：块；宽度：100%}

---

正如BillyNate所说，

setInterval

让它按照您想要的方式工作。要以10秒的间隔重复幻灯片放映，需要隐藏最后一张幻灯片，然后通过设置超时在10秒后重复幻灯片放映

可以在最后一张幻灯片设置为

显示：无

的位置应用动画

var slides=document.getElementsByClassName（“mySlides”）；
函数switchSlides（）{
var slideCount=slides.length；
var i=0；
//将第一张幻灯片设置为可见
幻灯片[i].style.display=“block”；
//开关每10秒滑动一次
var switchInterval=setInterval（函数（）{
i++；
如果（i淡出图像）
幻灯片[i-1]。style.display=“无”；
//等待10秒钟，然后重复切换幻灯片
设置超时（开关幻灯片，10000）；
}
}, 10000);
}
切换幻灯片（）
.mySlides{
显示：无；
}

您已经熟悉setTimeout，还请查看setInterval；）@比利纳特，所以我试过了，但现在我似乎有它只是不断地玩没有pause@kyle：您正在调用myPause方法而不使用（），更多详细信息，请参见下面的“我的asnwer”。@Kyle:其他代码都是正确的。嘿，比利，我想我可能不是很清楚，但我希望它在最后一张图像上淡出，并且在X时间内不再显示图像。在所说的X时间之后，我正在寻找幻灯片收割机。只要您希望“空白幻灯片”与其他幻灯片具有相同的时间，您可以继续使用
setInterval
。我相应地修改了代码。