javascript - 根据一天中的时间更改图像文件夹

Question

更新 - 已经发现一个问题。这只是我愚蠢的错误。如何添加一个函数以使该代码在每个时间 block 重新运行，以便它在打开的浏览器上更新？ - 谢谢

我试图建立一个简单的图像库(例如 20 张图像，每张 15 秒，无限滚动)，但所有图像都会根据一天中的时间而变化。例如:上午 8 点至上午 11 点一组，中午 12 点至下午 4 点一组，下午 4 点至晚上 8 点，晚上 8 点至上午 7 点。我一直在用我找到的现有代码来搞乱这个，并尝试了很多版本，但没有一个有效。

这是我正在搞乱的代码想法(不起作用)，但也许我应该完全不同地处理这个问题。想法？

(不同时间 block 的示例，并且仅包含 3 个图像 - 但不起作用)

$(document).ready(function(){
var d = new Date();
var n = d.getHours();

// If time is after 8PM or before 7AM
if (n > 20 || n < 7) {
$("img#photo1").attr("src","img/8TO7/photo1.jpg");
$("img#photo2").attr("src","img/8TO7/photo2.jpg");
$("img#photo3").attr("src","img/8TO7/photo3.jpg");
}

else if (n > 16 && n < 20) {
 $("img#photo1").attr("src","img/4TO8/photo1.jpg");
 $("img#photo2").attr("src","img/4TO8/photo2.jpg");
 $("img#photo3").attr("src","img/4TO8/photo3.jpg");
 }

else {
 $("img#photo1").attr("src","img/main/photo1.jpg");
 $("img#photo2").attr("src","img/main/photo2.jpg");
 $("img#photo3").attr("src","img/main/photo3.jpg");
 }
});

Answer 1

以下演示应该可以满足您的要求。

您可以使用 setIntervall(callback, ti​​me_in_ms) 重新运行代码。在演示中，间隔设置为 5 秒。以表明它正在运行。

也许您可以添加图像缓存并检查图像是否仅在必要时重新加载。目前，它会在每次回调时重新加载图像。

您可以在 jsFiddle 找到相同的代码.

为了进行测试，您可以将时间传递给 var d = new Date('17/12/2014 16:00:00');，以便更轻松地测试是否显示正确的集合。

$(document).ready(function () {
    //var d = new Date();
    
    var timer = function () {
        var d = new Date(); //'17/12/2014 06:00:00'); // test date 4pm to 8pm  
        console.log(d);
        var n = d.getHours();
        console.log(n);

        var url = 'http://lorempixel.com/400/200/sports/';
        var urls8pmto7am = [url + '1/', url + '2/', url + '3/'];
        var urls4pmto8m = [url + '4/', url + '5/', url + '6/'];
        var urls = [url + '7/', url + '8/', url + '9/'];

        // If time is after 8PM or before 7AM
        if (n > 20 || n < 7) {
            console.log('show set 8pm to 7am');
            $("#photo1").attr("src", urls8pmto7am[0]);
            $("#photo2").attr("src", urls8pmto7am[1]);
            $("#photo3").attr("src", urls8pmto7am[2]);
        } else if (n >= 16 && n <= 20) {

            console.log('show set 4pm to 8pm');
            $("#photo1").attr("src", urls4pmto8m[0]);
            $("#photo2").attr("src", urls4pmto8m[1]);
            $("#photo3").attr("src", urls4pmto8m[2]);
        } else { // main

            console.log('else, should not be triggered');
            $("#photo1").attr("src", urls[0]);
            $("#photo2").attr("src", urls[1]);
            $("#photo3").attr("src", urls[2]);
        }
    };
    
    timer(); // run immediatly after start
    
    setInterval(timer, 5 *1000); // 1 *1000 *60 *60 runs every hour for testing every 5 seconds
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" id="photo1" />
<img src="" id="photo2" />
<img src="" id="photo3" />