基于时间的图像显示 [英] Image display based on time

问题描述

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

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

 < img id =mainImagesrc =/ 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（）; //创建一个新的日期对象
 var dayNight = newDay.getHours（）; //以小时为单位获取时间
 
函数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）; 
}; 
} 
  

解决方案

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

（function（）{
 //您的代码在这里
}）（）; 
  

然后我认为你的问题之一是你的displayImages函数，你声明但是从来没有调用过！

应该叫它在你的代码结尾处（或者只是放弃它）

  displayImages（）; 
 
I'm trying to create an image rotator that displays certain images at certain times, but also rotates at other times in the day. 

When I first created it, I just had it rotate every three seconds. That worked fine. But once I added the code to make a different image show up at different times, it quit working all together. Part of the problem is I'm confused about where I should put the setInterval and clearInterval. Anyway, here;s the code.
     <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);
        };
    }​

解决方案
first of all, all your variables seem to be are global, please dont do that, use an anonymous function-wrapper which executes your code (immediately (read about IIFE here. this is not part of your problem, but just good and clean coding style.
(function() {
  // your code here
})();
then i think one of your problems is your displayImages-function, which you declare but never call!

just should call it at the end of your code (or just leave it out)
displayImages();
if you want your images not to be swapped between 10-12 and 17-19 your code should then work as expected. if the images should swap even at this times, you shouldnt put the setInterval into the last else (inside your displayImages-function

                        
这篇关于基于时间的图像显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！