0

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

我正在尝试创建一个简单的图片库（例如 20 张图片，每张 15 秒，无限滚动），但所有图片都会根据一天中的时间而变化。例如：8am-11am 一组，12pm-4pm 另一组，4-8pm 和 8pm-7am。我一直在从我找到的现有代码中弄乱这个，并尝试了很多版本，但都没有奏效。

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

（不同时间块的示例，只有 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");
 }
});
4

1 回答 1

1

下面的演示应该做你想做的。

您可以使用 重新运行您的代码setIntervall(callback, time_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" />

于 2014-12-17T22:26:50.337 回答