Изменяет папку "Изображения" в зависимости от времени суток.

Question

Обновление - уже поймали одну проблему. Была просто моя глупая ошибка. Как добавить функцию, чтобы этот код повторно запускался для каждого временного блока, чтобы он обновлялся в открытом браузере? - Спасибо

Я пытаюсь создать простую галерею изображений (например, 20 изображений по 15 секунд с бесконечной прокруткой), но все изображения будут меняться в зависимости от времени суток. Например: с 8:00 до 11:00 один сет, с 12:00 до 16:00 другой, с 4:00 до 8:00 и с 8:00 до 7:00. Я возился с этим из существующего кода, который я нашел, и перепробовал кучу версий, но ни одна из них не сработала.

Это идея кода, с которой я связываюсь (не работаю), но, может быть, мне стоит пойти по-другому. Мысли?

(пример разных временных блоков, и только с 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, 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" />