Javascript Jquery setTimeout不是'；t工作（图像幻灯片）

我正在为一个网站制作一个快速幻灯片。我仍在编写Javascript/jQuery，因此将来可能会简化代码。无论如何，我使用setTimeout函数来增加currentImage变量。但是，它似乎不能正常工作，因为图像不会随着时间的推移而改变。“后退”和“下一步”按钮仍然有效，但它似乎跳过了其中一个图像

$(document).ready(function(){
    var topofDiv = $("header").offset().top;
    var height = $("header").outerHeight();
    $(window).scroll(function(){    
        if($(window).scrollTop() > (topofDiv + height))
        {
            $("#nav").css("position","fixed");
        }
        else
        {
            $("#nav").css("position","static");
        }
    });
    var currentImage = 0;
    function autoPlay()
    {
        window.setTimeout(function(){
            currentImage++;
        }, 1000);
    };
    function slideImage()
    {
        if(currentImage == 0)
        {
            $(".img1").fadeIn(1000).show();
        }
        else
        {
            $(".img1").fadeOut(1000).hide();
        }
        if(currentImage == 1)
        {
            $(".img2").fadeIn(1000).show();
        }
        else
        {
            $(".img2").fadeOut(1000).hide();
        }
        if(currentImage == 2)
        {
            $(".img3").fadeIn(1000).show();
        }
        else
        {
            $(".img3").fadeOut(1000).hide();
        }
    };
    slideImage();
    autoPlay();
    $("#next").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#next").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#back").mouseenter(function(){
        $(this).css("color","black");
    });
    $("#back").mouseleave(function(){
        $(this).css("color","white");
    });
    $("#next").click(function(){
        clearTimeout(autoPlay);
        currentImage++;
        if(currentImage >= 3)
        {
            currentImage = 0;
        }
        slideImage();
    });
    $("#back").click(function(){
        clearTimeout(autoPlay);
        currentImage--;
        if(currentImage < 0)
        {
            currentImage = 2;
        }
        slideImage();
    });
});

$（文档）.ready（函数（）{
var topofDiv=$（“标题”）.offset（）.top；
变量高度=$（“标题”）.outerHeight（）；
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>（topofDiv+高度））
{
$（“#nav”）.css（“位置”、“固定”）；
}
其他的
{
$（“#nav”）.css（“位置”、“静态”）；
}
});
var currentImage=0；
函数autoPlay（）
{
setTimeout（函数（）{
currentImage++；
}, 1000);
};
函数slideImage（）
{
如果（currentImage==0）
{
$（“.img1”）.fadeIn（1000.show（）；
}
其他的
{
$（“.img1”）.fadeOut（1000.hide（）；
}
如果（currentImage==1）
{
$（“.img2”）.fadeIn（1000.show（）；
}
其他的
{
$（“.img2”）.fadeOut（1000.hide（）；
}
如果（currentImage==2）
{
$（“.img3”）.fadeIn（1000.show（）；
}
其他的
{
$（“.img3”）.fadeOut（1000.hide（）；
}
};
slidemage（）；
自动播放（）；
$（“#下一步”）.mouseenter（函数（）{
$（this.css（“颜色”、“黑色”）；
});
$（“#下一步”）.mouseleave（函数（）{
$（this.css（“颜色”、“白色”）；
});
$（“#back”）.mouseenter（函数（）{
$（this.css（“颜色”、“黑色”）；
});
$（“#back”）.mouseleave（函数（）{
$（this.css（“颜色”、“白色”）；
});
$（“#下一步”）。单击（函数（）{
清除超时（自动播放）；
currentImage++；
如果（当前图像>=3）
{
currentImage=0；
}
slidemage（）；
});
$（“#返回”）。单击（函数（）{
清除超时（自动播放）；
当前图像--；
如果（当前图像<0）
{
currentImage=2；
}
slidemage（）；
});
});

尝试以下代码。您需要在

setInteval

内调用

slideimage函数

，并且应该使用

setInterval

而不是

setTimeout

。因此，每1秒currentImage值将增加1并显示相应的图像。当currentImage值大于3时，然后将该值重置为零，并通过调用

slideimage dunction

 var interval ="";
 interval = window.setInterval(function(){
        currentImage++;
        slideImage();
        if(currentImage > 3)
        {
          currentImage = 0;
          slideImage();
        }

    }, 1000);

    function RemoveInterval() {
       clearInterval(interval );
    }

---

使用

setInteval

功能调用

next and back按钮中的
removieinterval
，然后单击
调用
slideImage
，此功能正常工作，但现在我遇到了不同的问题。“后退”和“下一步”按钮不再工作，从最后一幅图像循环到第一幅图像之间有1秒的延迟。@JordanU。这是幻灯片放映中的默认行为。显示图像之间的间隙有没有解决方法？“我希望它能直接从一幅图像转到另一幅图像。”乔达努。从上一张图像到第一张图像？是的，当前从图像3移动到图像1时显示空白。