基于时间的图像显示(Image display based on time)

我试图创建一个在特定的时间特定的显示图像的图像旋转，而且在一天中其他时间旋转。

当我第一次创造了它，我只是它每三秒钟旋转。 这工作得很好。 但是，一旦我加入了代码，使不同的图像在不同的时间出现，它停止工作都在一起。 问题的部分原因是我很困惑，我应该把的setInterval和clearInterval。 总之，这里; S代码。

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

JS：

    var myImage = document.getElementById("mainImage");
    var imageArray = ["arts/rotatorpics/artzone.jpg",
         "arts/rotatorpics/bach.jpg",
         "arts/rotatorpics/burns.jpg"];
    var imageIndex = 0;
    var changeImage = function() {
        mainImage.setAttribute("src", imageArray[imageIndex]);
        imageIndex++;
        if (imageIndex >= imageArray.length) {
            imageIndex = 0;
        }

    }

    var newDay = new Date(); //create a new date object
    var dayNight = newDay.getHours(); //gets the time of day in hours

    function displayImages() {
        if (dayNight >= 10 && dayNight <= 12) {
            mainImage.setAttribute("src", imageArray[1]);
        } else if (dayNight >= 17 && dayNight <= 19) {
            mainImage.setAttribute("src", imageArray[2]);
        } else {
            var intervalHandle = setInterval(changeImage, 3000);
        }
        myImage.onclick = function() {
            clearInterval(intervalHandle);
        };
    }​

Answer 1:

首先，所有的变量似乎是全局的，请不要这样做，可以使用匿名函数封装程序执行代码（即（了解IIFE这里 ，这不是你的问题的一部分，但刚刚好，干净编码样式。

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

那么我想你的问题一个是你displayImages功能，其声明，但从来没有叫！

只是应该在你的代码的末尾调用它（或只是离开它）

displayImages();

如果你希望你的图片不是10-12和17-19之间进行交换你的代码都正常工作。 如果图像应该在这个时间甚至掉，你不应该把setInterval的其他进入最后一个（你里面displayImages功能

文章来源: Image display based on time