Javascript 基于时间的图像显示

我正在尝试创建一个图像旋转器，它在特定的时间显示特定的图像，但也在一天中的其他时间旋转

当我第一次创建它时，我只是让它每三秒旋转一次。效果很好。但是，一旦我添加了代码，使不同的图像在不同的时间显示，它就会停止工作。部分问题是我不知道应该把setInterval和clearInterval放在哪里。反正在这里,；这是密码

     <img id="mainImage" src="/arts/rotatorpics/artzone.jpg" />

JS:

var myImage=document.getElementById（“mainImage”）；
var imageArray=[“arts/rotatorphics/artzone.jpg”，
“arts/Rotatorphics/bach.jpg”，
“arts/Rotatorphics/burns.jpg”]；
var指数=0；
var changeImage=函数（）{
setAttribute（“src”，imageArray[imageIndex]）；
imageIndex++；
如果（imageIndex>=imageArray.length）{
imageIndex=0；
}
}
var newDay=新日期（）//创建新的日期对象
var dayNight=newDay.getHours（）//获取一天中的时间（以小时为单位）
函数displayImages（）{
如果（dayNight>=10&&dayNight=17&&dayNight首先，您的所有变量似乎都是全局变量，请不要这样做，请使用匿名函数包装器立即执行您的代码（请阅读。这不是您的问题的一部分，只是良好和干净的编码风格）

(function() {
  // your code here
})();

然后我认为您的问题之一是displayImages函数，您声明了它，但从未调用过它

应该在代码末尾调用它（或者干脆不调用）

如果你不想在10-12和17-19之间交换图像，那么你的代码应该按预期工作。如果图像在这个时候也要交换，你就不应该把setInterval放在最后一个值中（在你的displayImages函数中）
修复你的代码，使其可读，请明白！这是可行的。我会看看关于IIFE的文章。
(function() {
  // your code here
})();

displayImages();