Javascript 从阵列中按时间开始的顺序输出图像

我有一组图像。当您单击按钮时，我的图像将按照实时变化的顺序（上午、下午、晚上、晚上）滚动，从一天中当前时间对应的图像开始。例如，如果是白天，则单击时应显示傍晚。如果是晚上，那么第二天早上一定会出现。我的代码，但不起作用

const images = ['assets/images/morning/01.jpg', 'assets/images/day/01.jpg', 'assets/images/evening/01.jpg', 'assets/images/night/01.jpg'];
  let i = 0;
function changeImage() { 
  let today = new Date(),
  hour = today.getHours();
  if (hour < 12) {
    // Morning
    i = 0;
  } 
  if (hour < 14) {
    i = 1
    document.body.style.color = 'black';
  } 
  if (hour < 18) {
    // evening
    i = 2
   } 
  if (hour < 0) {
    // Night
    i = 3  
  }
  let index = i;
  const imageSrc = images[index];
  viewBgImage(imageSrc);
  i++;
}
btnImage.addEventListener('click', changeImage)

const images=['assets/images/morning/01.jpg'、'assets/images/day/01.jpg'、'assets/images/night/01.jpg'、'assets/images/night/01.jpg'；
设i=0；
函数changeImage（）{
让今天=新日期（），
小时=今天。getHours（）；
如果（小时<12）{
//早晨
i=0；
} 
如果（小时<14）{
i=1
document.body.style.color='黑色'；
} 
如果（小时<18）{
//晚上
i=2
} 
如果（小时<0）{
//夜
i=3
}
设指数=i；
const imageSrc=图像[索引]；
viewBgImage（imageSrc）；
i++；
}
btnImage.addEventListener（'click'，changeImage）

如果hour为10，则前三个条件将为真，因此您将多次更改“i”变量，请使用否则如果

小时<0是无效条件

---

我还没有运行代码，但在我看来，

hour<0

在您想知道是否是夜间时是不正确的。代码不完整/情况不可再现。i、 e.

viewBgImage

和

btnImage

未在此代码中定义。但也许作为一个通用的建议，你可以考虑用一个通用变量名<代码>全局状态跟踪>让我< /C> >不是一个好主意。或者，您可以将状态作为具有

标记的容器的属性进行跟踪。在我看来，

viewBgImage

实际上是更改图像的函数，

changeImage

是一个刷新过程。