0

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

当我第一次创建它时，我只是让它每三秒旋转一次。那工作得很好。但是一旦我添加了代码以在不同的时间显示不同的图像，它就不再一起工作了。部分问题是我对应该将 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);
        };
    }​
4

1 回答 1

1

首先，你所有的变量似乎都是全局的，请不要那样做，使用匿名函数包装器来执行你的代码（立即（阅读关于IIFE 这里。这不是你的问题的一部分，但只是好的和干净的编码风格。

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

那么我认为你的问题之一是你的 displayImages 函数，你声明但从不调用它！

只是应该在代码末尾调用它（或者直接忽略它）

displayImages();

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

于 2012-12-08T18:33:01.443 回答