Как отобразить одно изображение за раз из массива изображений, которые выбираются из базы данных?

Question

В этом приложении я загружаю изображения в локальную папку загрузок, а в MySQL database я сохраняю имя изображения. Как я могу отобразить одно изображение за раз из массива изображений, которые выбираются из database? В настоящее время мне удалось отобразить все загруженные изображения, используя EJS. Как я могу установить, что одно отображаемое изображение «src» меняется каждые 10 секунд или около того?

<% for(i=0; i<images.length; i++) { %>
    <img src="/uploads/<%= images[i].name %>" alt="">
<% }; %>

Answer 1

Я не очень осведомлен о EJS, поэтому, если есть какая-либо синтаксическая ошибка, измените ее с вашей стороны.Сначала создайте уникальный идентификатор для всех изображений и одного и того же имени класса.

<% for(i=0; i<images.length; i++) { %>
    <% if(i == 0) { %>
        <img class="allImage" src="/uploads/<%= images[i].name %>" alt="" id="image_<%= i %>">
    <% }; %>
    <% if(i != 0) { %>
        <img class="allImage" src="/uploads/<%= images[i].name %>" alt="" image_id="test<%= i %>" style="display:none;">
    <% }; %>
<% }; %>

Вы можете создать условие if-else или использовать if внутри тега style.

Теперь вам нужно определить глобальный javascriptпеременная.Значение этой переменной начинается с 0.

var a = 0;

Создайте функцию и вызывайте ее через каждые 10 секунд

window.setInterval(function(){
    myFuction();
}, 10000);

Проверьте длину изображений, чтобы при последнем отображении изображения мы могли начать сновас 0.

myFuction(){
    a = a + 1; // increment global variable to show next image
    var length = $('.allImage').length;
    if(length == a || length > a){
        a = 0;
    }
    $('.allImage').hide(); // First hide all image with same class
    $('#image_'+a).show(); //  Show next image
}

Надеюсь, это поможет вам получить ваш результат.Это работает для меня в php, поэтому я надеюсь, что это будет работать и для вас.Если есть какая-либо синтаксическая ошибка, измените ее на своем конце.Спасибо

Answer 2

Я раньше не использовал EJS, но я представляю что-то, используя setTimeout , так как у вас непростое время, когда вы хотите, чтобы изображение изменилось. Вот пример: https://repl.it/@johnoro/Image-shuffling-example Если вы хотите, чтобы он зацикливался без случайности, вам нужно просто сохранить индекс. Я пошел дальше и добавил ссылку на версию без случайности. Поскольку EJS - это просто JavaScript, я предполагаю, что это должно быть легко конвертировать для ваших целей Дайте мне знать, если вам нужна дополнительная помощь!

И, для целей показа кода без перехода на другой сайт:

// Selects the DOM node with the unique id, 'switch'.
const img = document.querySelector('#switch');

const images = [
    "https://picsum.photos/350",
    "https://picsum.photos/300?blur",
    "https://picsum.photos/300?grayscale&blur=2"
];

function changeImage() {
    // This'll give us a floating point number that's between 0 and the length of the images.
    const rand = Math.random() * images.length;
    // This'll give us an integer between 0 and the last index of our images.
    const index = Math.floor(rand);

    img.src = images[index];

    // Notice that the function calls itself with our desired time, in this case 5000 milliseconds, or 5 seconds.
    setTimeout(changeImage, 5000);
}

// We have to call it for the first change!
setTimeout(changeImage, 5000);