Question

我正在尝试创建一个图像旋转器，在某些时间显示某些图像，但也会在当天的其他时间旋转。

当我第一次创建它时，我只是每隔三秒旋转一次。这工作得很好。但是，一旦我添加了代码，以便在不同的时间显示不同的图像，它就会一起退出。部分问题是我对应该放置setInterval和clearInterval的位置感到困惑。无论如何，这里是代码。

     <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 here。这不是你问题的一部分，但只是干净利落的编码风格。

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

然后我认为您的一个问题是您的displayImages-function，您声明但从不打电话！

应该在你的代码末尾调用它（或者只是把它留下来）

displayImages();

如果您希望在10-12和17-19之间不交换图像，那么您的代码应该按预期工作。如果图像即使在这个时候也应该交换，你不应该把setInterval放到最后的其他地方（在你的displayImages-function

里面）

基于时间的图像显示

1 个答案: