在Javascript中暂停/播放幻灯片（设置间隔）

首先，我想说的是，我在这方面非常新，可能非常糟糕，我已经尝试了好几个星期，搜索了答案等等，只是无法在我的代码中实现正确的东西。我只想暂停/恢复幻灯片动画。我设法使它大部分工作，但问题是设置间隔。我的设定为10秒。我有一个淡入淡出的动画，也持续10秒。如果我暂停，比如说5秒后，然后继续，动画将有10秒的额外时间加起来15秒，之后它将突然改变幻灯片，我希望平滑过渡

我能想到的是保存暂停时间隔的经过时间，然后从间隔的总时间中减去该值，并将其设置为剩余部分。问题是我不知道如何将其转化为代码/

var slideIndex = 1;
var myIndex = 0;
var myVar;
var playing = true;
var pauseButton = document.getElementById("pause");
var y = document.getElementsByClassName("mySlides");
var k;
var div = document.getElementsByClassName("stuff");
var globaltime = 10000;
var slideInterval = setInterval(carousel, globaltime);
var milisec;



function plusDivs(n) {
        showDivs(slideIndex += n);
    }

function currentDiv(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" white", "");
    }
    x[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " white";
}

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" white", "");
    }
    x[myIndex-1].style.display = "block";
    dots[myIndex-1].className += " white";
}

function pauseSlideshow(){
    pauseButton.innerHTML = '&#9658;';
    playing = false;
    t = slideInterval;
    clearInterval(slideInterval);
    for (k = 0; k < div.length; k++) {
        div[k].className = div[k].className.replace(" running", " paused");
    }
}

function playSlideshow(){
    pauseButton.innerHTML = '&#10073;&#10073;';
    playing = true;
    slideInterval = setInterval(carousel, globaltime);
    for (k = 0; k < div.length; k++) {
        div[k].className = div[k].className.replace(" paused", " running");
    }
}

function stop(){
    if(playing){
        pauseSlideshow();
    }
    else {
        playSlideshow();
    }
}

carousel();
timer();
showDivs(slideIndex);

var slideIndex=1；
var-myIndex=0；
var-myVar；
var=true；
var pauseButton=document.getElementById（“暂停”）；
var y=document.getElementsByClassName（“mySlides”）；
var-k；
var div=document.getElementsByClassName（“stuff”）；
var globaltime=10000；
var slideInterval=setInterval（旋转木马、全局时间）；
米利希变种；
函数plusDivs（n）{
showDivs（slideIndex+=n）；
}
函数currentDiv（n）{
showDivs（slideIndex=n）；
}
函数showDivs（n）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
如果（n>x.length）{slideIndex=1}
如果（n<1）{slideIndex=x.length}
对于（i=0；ix.length）{myIndex=1}
对于（i=0；i

提前非常感谢您的时间、耐心和理解。

您能做一个简单的回答吗？那么帮助你就容易多了应该没问题。不要介意它没有居中，以及它在开始时做的事情。。。我没有这个问题（第一次转换等待10秒）。问题在于暂停/播放按钮及其效果。